如何在我的html页面中添加第二个模态

我在上一篇文章中没有解释我的问题。

所以我想在我的html页面添加第二个模态,所以如果你点击“按钮1”它将打开“模态1”,如果你点击“按钮2”它将打开“模态2”然而“按钮3”“按钮4“”按钮5“和”按钮6“打开”模态2“。 当我创建第二个模态并在下面设置javascript。 它将在两个按钮上保持打开模态2,而不是按钮1上的模态1。

另请注意,第一个按钮“免费”的ID

另请注意,第二个按钮“oneday”的ID

 // Get the modal1 var modal = document.getElementById('myModal1'); // Get the button that opens the modal var btn = document.getElementById("free"); // Get the  element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on  (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }   // Get the modal2 var modal = document.getElementById('myModal2'); // Get the button that opens the modal var btn = document.getElementById("oneday"); // Get the  element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on  (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }  

当按钮1设置为“Modal1”HTML下面时,两个按钮都保持打开“Modal2”

按钮1

  

So you can get a taste of the action for free, we will give new users a 5 day trial to see how they like our bot before they buy!

按钮2

  

$0.74   -24 Hours

而模仿就在这里

Modal1

   

Modal2

   

所以我问我怎样才能让modal1只用button1和modal2来处理后面会创建的按钮2,3,4,5和6。

你只需要一个模态 – 它只是一个DIV结构,没有什么魔法(唯一的magic就是让它出现/消失 – 而bootstrap就是这个技巧)。 在需要时,从存储位置抓取所需内容,将其粘贴到模态的.modal-body div中,然后让bootstrap显示它。

这是如何做。

(1)将每个模态的内容存储在文档中其他位置的隐藏DIV中。

(2)给每个按钮一个ID,你可以隔离一个唯一的编号,并给每个“隐藏的模态内容div”一个以相同的数字结尾的名字。 例如,按钮“#btn_2”将与隐藏的div“#mdl2”匹配,其中包含按钮#btn_2所需的内容。

(3)使用javascript(你使用的是Bootstrap,它使用jQuery,所以为什么不使用jQuery)来交换正确的内容。 单击按钮时,隔离数字2( var buttNum = this.id.split('_')[1]; – 尝试)并使用它从#mdl2 div中获取html( var content = $('#mdl'+buttNum).html()

(4)让Bootstrap负责打开/关闭模态。

例:

 $('[id^=btn_]').click(function(){ var buttNum = this.id.split('_')[1]; //alert(buttNum); var content = $('#mdl'+buttNum).html(); $('#myModal1 .modal-body').html(content); }); 
 #mdl1, #mdl2, #mdl3{display:none;} /* Hide the divs containing modal content */ 
    Bootstrap Example        

Re-Using the Same Modal

Click outside modal to close modal
×




Click outside modal to close modal

Image of an Animal

Click outside modal to close modal

Poem by Ogden Nash

The hands of the clock were reaching high
In an old midtown hotel;
I name no name, but its sordid fame
Is table talk in hell.
I name no name, but hell's own flame
Illumes the lobby garish,
A gilded snare just off Times Square
For the maidens of the parish.
The revolving door swept the grimy floor
Like a crinoline grotesque,
And a lowly bum from an ancient slum
Crept furtively past the desk.
His footsteps sift into the lift
As a knife in the sheath is slipped,
Stealthy and swift into the lift
As a vampire into a crypt.

您不需要编写javascript来隐藏或显示模态使用按钮标记中的正确数据目标和数据切换,如下所示,bootstrap将自动完成剩下的工作。

如上所示,在按钮标记内设置data-toggle="modal"data-target=''

要显示两个按钮的两个模态,只需在新按钮的data-target=''属性中添加新模data-target=''

现在创建多个模态并为每个模态提供不同的

   

更新:添加关闭按钮以通过BOOTSTRAP关闭模式

用你的模态替换×

它会在点击模态上的关闭按钮时自动关闭模态。

以下是如何使用两个模态的示例

    Bootstrap Example        

Large Modal