如何在 bootstrap 中使用模型关闭按钮?

How to dismiss buttons with models works in bootstrap?

我想知道为什么当我将它与模型一起使用时关闭按钮不起作用。请访问下面的 link 并告诉我怎么可能?

http://builderfunding.co.in/doylesweb/index.html

这是代码 - `

<button type="button" class="btn btn-default btn-lg btn-block" data-toggle="modal" data-target="#myModal">My Booking</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
          <button type="button" class="btn btn-default btn-lg btn-block" data-toggle="modal"  data-target="#myModal1">How it Works?</button>
          <!-- Modal -->
          <!-- Modal -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

`

您好,因为您的 css 代码模型和模式背景都具有几乎相同的 z-index 值

.modal {      
z-index: 1050;    
} 

.modal-backdrop{
   z-index:1040;
 }

删除 modal-backdrop z-index ,它将正常工作 (Bootstrap.min.css) [ http://builderfunding.co.in/doylesweb/index.html ]