Bootstrap：处理多个模式对话框

undefined 发表于 Dev

不明确的

我想处理Twitter Bootstrap中的两个不同的模式对话框。

因此，我的想法是仅复制模式对话框HTML并使用创建一个新按钮（BTN2）data-toggle="modal2"。并单击新按钮（BTN2），将显示第二个模式对话框，而不是第一个。

我通过单击BTN2进行了尝试，但未显示任何对话框。但是，在现有按钮（BTN1）上，两个对话框都会出现。

这是当前的模式对话框。是的，它基于bootstrap.com提供的示例，因此基于bs-example-modal-lg类。

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="PodcastModal" aria-hidden="true">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
             <ul class="nav nav-tabs" role="tablist" id="list"></ul>
         </div>
         <div class="modal-body">
            <div id="items"></div>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-primary" data-dismiss="modal">Done!</button>
         </div>
      </div>
   </div>
</div>

这是调用模式对话框的按钮。

<div class="btn-group">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
    <span class="glyphicon glyphicon-plus"></span> <span class="hidden-xs">Add</span>List</button>
</div>

劳拉

该data-toggle值不是负责模式打开的值，您需要
data-target为此。因此，给您的每个模态一个id，并使用引用它
data-target="#foo"：

<div class="modal" id="modal1"></div>
<div class="modal" id="modal2"></div>

<button data-toggle="modal" data-target="#modal2">
<button data-toggle="modal" data-target="#modal1">

（细分为相关部分）

但是请注意，如果您曾经对javascript进行过干预，或者从模式中打开了一个模式：