In the bootstrap documentation you can read an alert saying that the overlay of modal windows is not supported, so you may have some problems doing what you want.
Overlapping modals not supported
Be sure not to open a modal while Another is still Visible. Showing more than one modal at a time requires custom code.
The bootstrap has a limitation with modal windows by not managing the z-index
. Therefore, when opening a modal over another will happen several errors as for example what was happening to you of a bottom stay below the other or close both open windows at the same time.
Some solutions to this problem have already been found.
1 - Solution via CSS
If you always have at most two windows open on top of each other, you can control directly by CSS
HTML
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
<br>
<br>
<br>
<br>
<br>
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Second Modal title</h4>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
CSS
.modal:nth-of-type(even) {
z-index: 1042 !important;
}
.modal-backdrop.in:nth-of-type(even) {
z-index: 1041 !important;
}
Javascript
$('#openBtn').click(function(){
$('#myModal').modal({show:true})
});
2 - Event-based solution of the bootstrap plugin
The bootstrap plugin has events that can be listened to to perform some necessary function.
See the example in jsfiddle
$('.modal').on('show.bs.modal', function(event) {
var idx = $('.modal:visible').length;
$(this).css('z-index', 1040 + (10 * idx));
});
$('.modal').on('shown.bs.modal', function(event) {
var idx = ($('.modal:visible').length) -1; // raise backdrop after animation.
$('.modal-backdrop').not('.stacked').css('z-index', 1039 + (10 * idx));
$('.modal-backdrop').not('.stacked').addClass('stacked');
});
$('.modal').on('hidden.bs.modal', function(event) {
if ($('.modal:visible').length > 0) {
setTimeout(function() {
$(document.body).addClass('modal-open');
}, 0);
}
});
3 - Solution changing the bootstrap plugin
Locate the code below
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$element
.addClass('in')
.attr('aria-hidden', false)
that.enforceFocus()
and changes to
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$backdrop
.css("z-index", (1030 + (10 * $(".modal.fade.in").length)))
that.$element
.css("z-index", (1040 + (10 * $(".modal.fade.in").length)))
.addClass('in')
.attr('aria-hidden', false)
that.enforceFocus()
There are plugin that complement the bootstrap, search for "Bootstrap Manager" which will find several.
Source
Put part of your code here.
– Diego Zanardo
Put some of your code in so we can take a closer look. And a tip is to try to avoid this functionality, for the sake of usability, because opening a modal within another modal does not bring good user experience.
– Erico Souza
Wilson, answer your question by adding an answer, do not answer within the question itself.
– Paulo
@bfavaretto As she is duplicated if she was created before this one marked ?
– Gabriel Rodrigues
@The chronology doesn’t matter, I left that one as the main one for having more answers. Maybe it’s the case to merge the two questions, I’m thinking.
– bfavaretto
@bfavaretto I get it!
– Gabriel Rodrigues