28626
Question:
I need to be able to open a modal within another modal (while the first modal stays open). Here's an example of that:
<a href="http://jsfiddle.net/k2coz893/2/" rel="nofollow">http://jsfiddle.net/k2coz893/2/</a>
When you open the second modal, you'll notice that the backdrop/background of the second modal doesn't cover the first modal (i.e. the first modal can still clearly be seen when the second modal is open). This seems to be because the z-index of the second modal's backdrop is the same as the other and therefore the first modal is still visible.
How can I prevent this? How can I have the second modal's backdrop cover 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">×</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>
Something
Something
Something
Something
Something
</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">×</span></button>
<h4 class="modal-title">second</h4>
</div>
<div class="modal-body">
One fine body…
</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 -->
Answer1:Overriding default Bootstrap's css for more than one modals will fix your problem.
<strong>Method #01:</strong>
Following css will work in case you have only 2 modals.
.modal-backdrop + .modal-backdrop {
z-index: 1040;
}
.modal + .modal {
z-index: 1050;
}
<pre class="snippet-code-css lang-css prettyprint-override">@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;
}
<pre class="snippet-code-html lang-html prettyprint-override"><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">×</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>
Something
Something
Something
Something
Something
</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">×</span></button>
<h4 class="modal-title">second</h4>
</div>
<div class="modal-body">
One fine body…
</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 -->
<strong>Method #02:</strong>
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);
}
<pre class="snippet-code-css lang-css prettyprint-override">@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);
}
<pre class="snippet-code-html lang-html prettyprint-override"><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">×</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>
Something
Something
Something
Something
Something
</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">×</span></button>
<h4 class="modal-title">second</h4>
</div>
<div class="modal-body">
One fine body…
</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 -->
Answer2:Fixed it for you :) <a href="http://jsfiddle.net/cqLex5ga/4/" rel="nofollow">http://jsfiddle.net/cqLex5ga/4/</a>
#myModal2 {
background: rgba(0,0,0,0.7);
}
Answer3:Although @user1389637 has already answered your question, I would like to suggest you to use some jQuery events to on/off the opacity of the 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");
});
<a href="http://jsfiddle.net/130zrs9L/" rel="nofollow">Fiddle</a>
Answer4:This should work , if your HTML is going to stay the same. <a href="http://jsfiddle.net/k2coz893/5/" rel="nofollow">http://jsfiddle.net/k2coz893/5/</a>
.modal + .modal {
z-index:1050;
}
.modal-backdrop + .modal-backdrop{
z-index:1045;
}
Or you can add new classes to new modal to achieve the same
