I have a modal that opens on another modal, as I would not allow that modal that is open on the other modal does not close when I click outside it. Note: I'm using bootstrap, I already tried using "data-backdrop=" static "" and it did not work.
I was able to figure out what was going on, it was actually a bug, the class "data-backdrop=" static "" was in the wrong place, so just use it that will work correctly
In the bootstrap documentation you can read an alert saying that modal window overlay 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 modal window limitation because it does not manage z-index . So when you open a modal on another, there will be several errors, such as what was happening to you from one background below the other or close the two windows open at the same time.
Some solutions to this problem have already been found.
If you always have at most two windows open one over the other, you can control directly through CSS
<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>
.modal:nth-of-type(even) {
z-index: 1042 !important;
}
.modal-backdrop.in:nth-of-type(even) {
z-index: 1041 !important;
}
$('#openBtn').click(function(){
$('#myModal').modal({show:true})
});
The bootstrap plugin has events that can be listened to to perform some necessary function.
$('.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);
}
});
Find the code below
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$element
.addClass('in')
.attr('aria-hidden', false)
that.enforceFocus()
and change 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 plugins that complement the bootstrap, look for "Bootstrap Manager" that will find several.
Let's go straight to the answer :
Using setTimeout , because .modal-backdrop is not created when the show.bs.modal event is triggered.
$(document).ready(function () {
$('#abrir').click(function () {
$('#myModal').modal({
show: true
})
});
$(document).on('show.bs.modal', '.modal', function (event) {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});
});<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><adata-toggle="modal" href="#myModal" class="btn btn-primary">Abrir</a>
<div class="modal fade" 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 1</h4>
</div>
<div class="container"></div>
<div class="modal-body">Alguma coisa aqui dentro.
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Abrir</a>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn btn-danger">Fechar</a>
<a href="#" class="btn btn-primary">Outro botão a ser implementado</a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal2">
<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 2</h4>
</div>
<div class="container"></div>
<div class="modal-body">Alguma coisa aqui dentro.
<a data-toggle="modal" href="#myModal3" class="btn btn-primary">Abrir</a>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn btn-danger">Fechar</a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal3">
<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 3</h4>
</div>
<div class="container"></div>
<div class="modal-body">Acho que até aqui deu pra compreender...
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn btn-danger">Fechar</a>
</div>
</div>
</div>
</div>