twitter-bootstrap Bootstrap 在同一页面打开 2 个不同的模态对话框

Bootstrap open 2 different modal dialogs same page

提问by Bolli

I have a page where I want to launch 2 different modal windows. One for creating new users and one for editing existing users.

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

I show existing users in a clickable table and link to my modal #editlike this:

我在一个可点击的表格中显示现有用户，并#edit像这样链接到我的模式：

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

This opens my Bootstrap modal dialog:

这将打开我的 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".

This works like I want - when clicking on the table entry, the modal dialog gets opened with a form I created.

这就像我想要的一样 - 当点击表格条目时，模式对话框会用我创建的表单打开。

Now I created an exact copy of this modal dialog, only changed the id="edit"to id="create"and created this button:

现在我创建了这个模态对话框的精确副本，只更改了id="edit"toid="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>

I would think that it would now simply open my second modal dialog named #create, but instead it blanks out the screen, like when a modal dialog shows - but without showing any modal window/dialog.

我认为它现在会简单地打开我的第二个名为 的模态对话框#create，但它会使屏幕空白，就像显示模态对话框时一样 - 但不显示任何模态窗口/对话框。

Can anyone help me understand why this is happending or what I am doing wrong?

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

采纳答案by WhiteLine

this code open 2 modal dialogs in the same page

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

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