Bootstrap在同一页面打开2个不同的模式对话框

Question

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

我在可点击的表格中显示现有用户，并链接到我的模式，#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，但它会清空屏幕，就像显示模式对话框时一样 - 但不显示任何模式窗口/对话框。

谁能帮助我理解为什么会发生这种情况或者我做错了什么？

Answer 1

此代码在同一页面中打开 2 个模式对话框

\n\n

<button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal1">modal1</button>\n\n<button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal2">modal2</button>\n\n<div class="modal hide fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">\n      <div class="modal-dialog">\n        <div class="modal-content">\n          <div class="modal-header">\n            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">\xc3\x97</button>\n            <h4 class="modal-title" id="myModalLabel"></h4>\n          </div>\n          <div class="modal-body">\n\n          </div>\n          <div class="modal-footer">\n            <button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n\n\n<div class="modal hide fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">\n      <div class="modal-dialog">\n        <div class="modal-content">\n          <div class="modal-header">\n            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">\xc3\x97</button>\n            <h4 class="modal-title" id="myModalLabel"></h4>\n          </div>\n          <div class="modal-body">\n\n          </div>\n          <div class="modal-footer">\n            <button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>\n          </div>\n        </div>\n      </div>\n    </div>\n

\n