Question

我有两个按钮可以调用具有不同ID的单个模态。出于某种原因，只有一个按钮成功调用其关联的模态，即创建模式，当单击另一个按钮时，似乎没有任何内容发生，但如果单击创建按钮，则会出现创建模式和删除模式。我的代码在下面供参考。

<div class="container">
 <div class="row">
   <button type="Submit" id="callcreate" class="btn btn-default btn-sm" style="margin-left: 10px; margin-right: 10px;" data-toggle="modal" data-target="#createModal">Create</button> 
   <button type="Submit" id="calldelete" class="btn btn-default btn-sm" style="margin-left: 10px; margin-right: 10px;" data-toggle="modal" data-target="#deleteModal">Delete</button>
 </div>

 <!-- Create Button to create a new profile -->
 <div class="modal fade" id="createModal" tabindex="-1" role="dialog" >
   <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>
            <h4 class="modal-title" id="createModalLabel">Create Profile</h4>
         </div>
         <div class="modal-body">
           <form method="" action="" name="requestprofiledata" id="requestprofiledata">
            <div >
              <label for="comment">Details: </label>       
              <table  id="tableID" class="table table-bordered table-hover tablewithtooltip">
                <thead>
                  //blah blah blah table/form stuff
              </table>
           </div>
          </form>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default btn-default" data-dismiss="modal" name="newProfile" id="newProfile">Save</button>
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->

<!-- Delete Profile button -->
<div class="modal" id="deleteModal" tabindex="-1" role="dialog" >
  <div class="modal-dialog modal-md">
    <div class="modal-content">         
      <div class="modal-header">
        <h4 class="modal-title" id="deleteModalLabel">Confirmation</h4>
      </div>
      <div class="modal-body" >
        <p>Do you wish to permanently delete this profile?</p>       
      </div>
      <div class="modal-footer">
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary" name="deleteprofile" id="deleteprofile">Delete profile</button>
      </div>
    </div>
  </div>
</div><!-- /model -->

Answer 1

您的所有div元素是否已正确关闭？

请寻找：

     </div> <!------ THIS ADDED -->

在：

DEMO

.... Indented version

Answer 2

您的代码存在的问题是您错过了#createModal http://jsfiddle.net/swm53ran/103/中的</div>

         </div><!-- /.modal -->
    </div> <!-- Add this one -->

而且，如果您想让它淡入而不是弹出，那么#deleteModal会丢失类淡入淡出

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" >

另外，这并没有真正影响效果，但是你错过了表格中的结束标题</thead>

通过按钮调用时不会出现模态

2 个答案: