Bootstrap:处理多个模态对话框

Question

我想在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>

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文档)