Neeraj Mishra Neeraj Mishra - 3 years ago 201
HTML Question

How to dismiss buttons with models works in bootstrap?

I want to know that, why dismiss button does not work when I'm using it with model. Please visit the below link and suggest me how it is possible ?

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

Here is the code -
`

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


`

Answer Source

Hi its because your css code model and modal-backdrop both codes having almost same z-index values

.modal {      
z-index: 1050;    
} 

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

remove modal-backdrop z-index , it will work fine (Bootstrap.min.css) [ http://builderfunding.co.in/doylesweb/index.html ]

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download