twitter-bootstrap Bootstrap：处理多个模态对话框

Bootstrap: Handle multiple modal dialogs

提问by undefined

I want to deal with two different modal dialogs within Twitter Bootstrap.

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

So the idea is that I just copy the modal dialog HTML and create a new button (BTN2) with data-toggle="modal2". And with a click on the new button (BTN2), the second modal dialog should show up, and not the first one.

所以我的想法是我只是复制模态对话框 HTML 并使用 data-toggle="modal2". 单击新按钮 (BTN2) 后，应该会出现第二个模态对话框，而不是第一个。

I tried it with a click on BTN2 but none of the dialogs showed up. On the existing button (BTN1), however, both dialogs show up.

我通过单击 BTN2 进行了尝试，但没有出现任何对话框。然而，在现有按钮 (BTN1) 上，两个对话框都会出现。

This is the current modal dialog. Yes it is based on the example provided by bootstrap.com, thus the bs-example-modal-lg class.

这是当前的模态对话框。是的，它基于 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>

This is the button to call the modal dialog.

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

<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>

回答by Laura

The data-togglevalue is not the one responsible for which modal opens, you need the
data-targetfor that. So give each of your modals an id, and reference that with
data-target="#foo":

该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">

(stripped down to the relevant parts)

（剥离到相关部分）

Watch out though, if you ever do some meddling with javascript or open a modal from a modal:

但是请注意，如果您曾经对 javascript 进行一些干预或从模态打开模态：

Overlapping modals not supported
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

不支持重叠模态
请确保不要在另一个模态仍然可见时打开模态。一次显示多个模态需要自定义代码。

(from the bootstrap docs)

（来自引导文档）

回答by gconsidine

Maybe taking a look at this modal example on getbootstrap.com instead will help:

也许看看 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>

source: http://getbootstrap.com/javascript/#modals

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

There is a data-targetattribute on the button element that is associated with an idof the modal div element. In this case, id="myModal". You could create as many modals as you want by using this structure and making sure each button's data-targetreferences a unique idof a modal.

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

回答by Vijay

There are two things, data-toggle="modal"and data-target="#modalId"

有两件事，data-toggle="modal"和data-target="#modalId"

data-toggle="modal": identifies the DOM object having class "modal" and toggles it on the button. Since modals are initially hidden, it just toggles the display and shows the modal dialog.

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

data-target="#modalId": identifies the DOM object having id "modalId" and targets that for data-toggle. This data attribute basically associates the button to the modal popup that needs to be toggled (displayed).

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)