Opening modal from modal, z-index background

Question

I need to be able to open the modal code as part of another modal (while the first modal remains open). Here is an example of this:

http://jsfiddle.net/k2coz893/2/

When you open the second modal, you will notice that the background / background of the second modal module does not cover the first modal (i.e. the first modal element can still be seen when the second modal is open). This seems to be due to the fact that the z-index second modal background is the same as the other, and therefore the first modal view is still visible.

How can I prevent this? How can I use the second modal background for the first modal?

HTML:

 <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch first modal </button> <div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div> <div class="modal fade" id="myModal" tabindex="-1" role="dialog"> <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">first</h4> </div> <div class="modal-body"> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2"> Launch second modal </button> <p> Something </p><p> Something </p><p> Something </p><p> Something </p><p> Something </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">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <div class="modal fade" id="myModal2" tabindex="-1" role="dialog"> <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">second</h4> </div> <div class="modal-body"> <p>One fine body&hellip;</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">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> 

Answer 1

Overriding the default Bootstrap css for more than one module will fix your problem.

Method # 01:

After css will work if you have only 2 modules.

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

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); body { margin: 10px; } .modal + .modal { z-index: 1060; } .modal-backdrop + .modal-backdrop { z-index: 1050; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch first modal </button> <div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div> <div class="modal fade" id="myModal" tabindex="-1" role="dialog"> <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">first</h4> </div> <div class="modal-body"> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2"> Launch second modal </button> <p> Something </p><p> Something </p><p> Something </p><p> Something </p><p> Something </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">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <div class="modal fade" id="myModal2" tabindex="-1" role="dialog"> <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">second</h4> </div> <div class="modal-body"> <p>One fine body&hellip;</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">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> 

Method # 02:

However, if there are many nested modals, you can use the following trick:

 .modal-backdrop { display: none; } .modal { background: rgba(0, 0, 0, 0.5); } 

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css'); body { margin: 10px; } .modal-backdrop { display: none; } .modal { background: rgba(0, 0, 0, 0.5); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch first modal </button> <div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div> <div class="modal fade" id="myModal" tabindex="-1" role="dialog"> <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">first</h4> </div> <div class="modal-body"> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2"> Launch second modal </button> <p> Something </p><p> Something </p><p> Something </p><p> Something </p><p> Something </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">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <div class="modal fade" id="myModal2" tabindex="-1" role="dialog"> <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">second</h4> </div> <div class="modal-body"> <p>One fine body&hellip;</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">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> 

Answer 2

This is fixed for you :) http://jsfiddle.net/cqLex5ga/4/

 #myModal2 { background: rgba(0,0,0,0.7); } 

Answer 3

Although @ user1389637 already answered your question, I would suggest you use some jQuery events to turn on / off the opacity of previous modals. You can also use these events for other purposes.

 $("#myModal2").on('show.bs.modal', function () { $("#myModal").css("opacity", "0.5"); }); $("#myModal2").on('hide.bs.modal', function () { $("#myModal").css("opacity", "1"); }); 

Fiddle

Answer 4

This should work if your HTML remains the same. http://jsfiddle.net/k2coz893/5/

 .modal + .modal { z-index:1050; } .modal-backdrop + .modal-backdrop{ z-index:1045; } 

Or you can add new classes to the new modal to achieve the same