引导开启同一页面上的两个不同模态对话框

Question

我有一个页面，想要启动两个不同的模态窗口。一个用于创建新用户，另一个用于编辑现有用户。

我在可点击的表格中显示现有用户，并链接到我的模态窗口#edit，如下所示：

<tr  data-id="<?php echo $value['id'];?>" data-toggle="modal" data-target="#edit" class="open-edit">

这会打开我的Bootstrap模态对话框：

<div class="modal fade" id="edit">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
I ommited the rest of the code.. I grab this modal on its id="edit".

这个功能可以满足我的需求 - 点击表格条目时，会打开一个我创建的带有表单的模态对话框。现在我创建了一个完全相同的模态对话框，只是将id="edit"更改为id="create"并创建了这个按钮：

<button class="btn btn-primary btn-me" data-toggle="modal" data-target="#create" >Create user<i class="fa fa-arrow-circle-right"></i></button>

我认为它现在应该只是打开我的第二个模态对话框，命名为#create，但实际上它会使屏幕变空白，就像显示模态对话框时一样 - 但没有显示任何模态窗口/对话框。请问有人能帮我理解这是为什么，或者我做错了什么吗？

- Bolli

Answer 1

这段代码在同一页中打开了两个模态对话框。

<button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal1">modal1</button>

<button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal2">modal2</button>

<div class="modal hide fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" id="myModalLabel"></h4>
          </div>
          <div class="modal-body">

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
          </div>
        </div>
      </div>
    </div>



<div class="modal hide fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" id="myModalLabel"></h4>
          </div>
          <div class="modal-body">

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
          </div>
        </div>
      </div>
    </div>

- WhiteLine

---

发现我在尝试将我的模态框放置在你的模态框内时，表单组标签放置得很奇怪。移除它们后，它可以正常工作！ :) 谢谢！ - Bolli

这是很好的信息...但我想知道是否可以使用类(class)代替一个模态框(modal)的ID？我有几个按钮打开一个模态框，还有一个<a>标签打开另一个。我会在按钮上使用类(class)，在<a>标签上使用ID。这个方法能用于你上面的代码吗？ - DLev

仔细检查模态框内的HTML。在第一个模态框中，我有一个闭合标签</di>而不是</div>，但当它是唯一的模态框时，它可以正常工作。当我将其复制粘贴到第二个模态框中时，即使更改了ID和其他所有内容，第一个模态框仍然可以正常工作，但第二个模态框无法正常工作。最后，我在两个div中修复了标签，现在两个模态框都可以正常工作。 - Kinjal Dixit

Answer 2

你需要将它放在两个不同的 div 上，这样它就可以工作了，我已经修复了它

- thanh cong chien