3
Good afternoon,
I saw several examples on the internet of a modal opening over another modal with the bootstrap, but none of them using javascript. There is no way to open a modal over the other with bootstrap using javascript?
3
Good afternoon,
I saw several examples on the internet of a modal opening over another modal with the bootstrap, but none of them using javascript. There is no way to open a modal over the other with bootstrap using javascript?
2
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>
2
I went through the same problem, you must keep information of how many modals are open, if a new one is open it must have a z-index higher than what is already, to always appear in front, for that the events shows and Hidden of the modal are treated. follows the example of the code:
$('.modal').on('hidden.bs.modal', function( event ) {
$(this).removeClass( 'fv-modal-stack' );
$('body').data( 'fv_open_modals', $('body').data( 'fv_open_modals' ) - 1 );
});
$( '.modal' ).on( 'shown.bs.modal', function ( event ) {
// keep track of the number of open modals
if ( typeof( $('body').data( 'fv_open_modals' ) ) == 'undefined' )
{
$('body').data( 'fv_open_modals', 0 );
}
// if the z-index of this modal has been set, ignore.
if ( $(this).hasClass( 'fv-modal-stack' ) )
{
return;
}
$(this).addClass( 'fv-modal-stack' );
$('body').data( 'fv_open_modals', $('body').data( 'fv_open_modals' ) + 1 );
$(this).css('z-index', 1040 + (10 * $('body').data( 'fv_open_modals' )));
$( '.modal-backdrop' ).not( '.fv-modal-stack' )
.css( 'z-index', 1039 + (10 * $('body').data( 'fv_open_modals' )));
$( '.modal-backdrop' ).not( 'fv-modal-stack' )
.addClass( 'fv-modal-stack' );
});
});
Website with example working: http://miles-by-motorcycle.com/static/bootstrap-modal/index.html
it would be interesting to put html here and if possible in a Pastebin, but here mainly, because in the link you passed there is no guarantee that tomorrow can be seen the example.
Could this modal have the feature of being dragged? or is it just fixed above the other?
I put in the Pastebin for the community: http://pastebin.com/tBDHES4y
1
It is possible to use without javascript, just put a button inside an open modal to call the other modal.
If you want to use javascript to call Modal, use the following code:
$('.btn.chamar-modal-a').on('click',function(){
$("#modalA").modal('show');
}
OBS: Pay attention to the overlap of Modal, in the code, puts Modal A after Modal B, ie Modal A on top of Modal B.
1
Yes, you can open a modal over another one using Javascript. See this example:
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>
Javascript:
$('#openBtn').click(function(){
$('#myModal').modal({show:true})
});
But in this case, the second form was not opened by js right?
But dude, the second form was not opened by js. It was opened because of the data-toggle="modal" href="#myModal2" tag that was added
You can use the Javascript function below that I gave you to open any modal.
It didn’t work no! Whenever I open the modal it is under the other modal that was already open!
Browser other questions tagged javascript jquery twitter-bootstrap
You are not signed in. Login or sign up in order to post.
Could you include the code in the answer itself? Go jsfiddle drops or disappears...
– bfavaretto
@bfavaretto is done!
– petersonfortes