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

Question

我有 2 个按钮来调用具有不同 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 丢失了 class fade

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

此外，这并没有真正影响性能，但是您在 table

中缺少结束标记 </thead>

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

Modal does not appear when called via button

javascript

jquery

twitter-bootstrap