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)

Bootstrap：处理多个模态对话框

3 个答案: