Bootstrap：处理多个模式对话框[重复]

Question

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

所以我的想法是我只需复制模态对话框 HTML 并使用 data-toggle="modal2" 创建一个新按钮 (BTN2)。单击新按钮 (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>

Answer 1

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 或从模态打开模态：

不支持重叠模式
一定不要打开模态，而 另一个仍然可见。一次显示多个模态 需要自定义代码。

（来自bootstrap docs）

Answer 2

也许看看 getbootstrap.com 上的这个模态示例会有所帮助：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

来源：http://getbootstrap.com/javascript/#modals

按钮元素上有一个data-target 属性，它与模态div 元素的id 相关联。在这种情况下，id="myModal"。通过使用此结构并确保每个按钮的 data-target 引用一个唯一的 id 模式，您可以创建任意数量的模式。

Answer 3

有两个东西，data-toggle="modal" 和 data-target="#modalId"

data-toggle="modal"：识别具有“modal”类的 DOM 对象并在按钮上切换它。由于模态框最初是隐藏的，它只是切换显示并显示模态对话框。

data-target="#modalId"：标识 id 为“modalId”的 DOM 对象，并将其定位为data-toggle。该数据属性基本上将按钮与需要切换（显示）的模式弹出窗口相关联。

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


<button data-toggle="modal" data-target="#modal1"></button>
//this will display first modal (modal1)   

<button data-toggle="modal" data-target="#modal1"></button>
//this will display second modal (modal2)