5
I have a modal that opens on another modal, as I would not allow this modal that is open on the other modal not to close when I click off it. Note: I am using bootstrap, I tried using "data-backdrop="Static"" and it didn’t work.
I was able to find out what was happening, in fact it was an error, the class "data-backdrop="Static"" was in the wrong place, so just use it that will work correctly
2
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.
If you always have at most two windows open on top of each other, you can control directly by 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);
}
});
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.
1
Let’s get right to the answer:
Using setTimeout, for the .modal-backdrop is not created when the event show.bs.modal 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>
<link href="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>
<a data-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>Could you include the code in the answer itself? Go jsfiddle drops or disappears...
Browser other questions tagged jquery html css
You are not signed in. Login or sign up in order to post.
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