Menu
I have a situation where I'm using a number of modals (for a login form, for a registration form, for a pass retrieval form, etc.) What happens is that if the user clicks "login" and then "register" they'll get two modals on top of each other. I would like bootstrap to be automatically closing all open modals prior to opening a new one. Ideally also wait for the animation.
Has anyone done anything? I have the following solution but I need to target the function every time.
function close_modal() {
$('.modal').modal('hide')
}
How can I bind this to every modal that opens?
I'm using Bootstrap v3.3.4
644
According to Bootstrap's website
Multiple open 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.
I tried to open multiple modals at the same time using javascript, which leads to the second modal not responding to events such as clicks.
So you will not get two multiple modals showing at the same time if you just click on the web page.
Here's the link Bootstrap Modals
============edited here===============
You can try this
$('.modal').on('show.bs.modal', function () {
$('.modal').not($(this)).each(function () {
$(this).modal('hide');
});
});
So before a modal is showing up, this script will try to close all other modals.
Here is the test html I used.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modal Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="modal fade" id="modal_1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">Title1</h4>
</div>
<div class="modal-body">
<p>Body1</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" id="launchSecond">Second</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal_2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">Title2</h4>
</div>
<div class="modal-body">
<p>Body2</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" id="launchFirst">First</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-2 col-md-offset-5">
<button type="button" class="btn btn-success" id="launchModalBtn">Launch Modal</button>
</div>
</div>
</div>
</body>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).on('click','#launchModalBtn',function () {
$('#modal_1').modal();
});
$(document).on('click', '#launchSecond', function () {
$('#modal_2').modal();
})
$(document).on('click', '#launchFirst', function () {
$('#modal_1').modal();
})
$('.modal').on('show.bs.modal', function () {
$('.modal').not($(this)).each(function () {
$(this).modal('hide');
});
});
</script>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
