How to hide Bootstrap previous modal when you opening new one?

Question

I have such trouble: I have authentification which is made using Bootstrap modals.

When user opens sign in modal he can go to sign up modal ( or other ) . So, I need to close previous one.

Now I'm closing them like this:

$(document).ready(function(){
  $("a").click(function() {
  $("#login").hide();
  $("#sign_up").hide();
 })  
});

but when I'm doing this - I can't reopen sign in modal( after click on sign up from sign in) until I refresh the page.

Can someone suggest how to check on what modal I'm clicking on the link and close it, when call another one ? Is there any universal way to close previous modal ?

score 91 · Accepted Answer · edited Jan 20 '16 at 14:36

91

You hide Bootstrap modals with:

$('#modal').modal('hide');

Saying $().hide() makes the matched element invisible, but as far as the modal-related code is concerned, it's still there. See the Methods section in the Modals documentation.

edited Jan 20 '16 at 14:36

Meeh

2,538
3
18
20

answered Sep 21 '12 at 13:51

willglynn

11,210
48
40

willglynn, I know how to hide it, but I need help in some logic. Can I create example and you will look at it ? – MID Sep 21 '12 at 14:08
Your example shows hiding with `$().hide`, rather than with `$().modal('hide')`. But yes, a [JSFiddle](http://jsfiddle.net/) would be helpful. – willglynn Sep 21 '12 at 14:16
Yeah, it is working better, than mine) I am not concentrated. Thanks YOU) – MID Sep 21 '12 at 14:25
Tis worked, Thank you – Tim Bogdanov Jan 19 '22 at 23:27

score 4 · Answer 2 · edited Jun 10 '16 at 23:00

4

Toggle both modals

$('#modalOne').modal('toggle');
$('#modalTwo').modal('toggle');

edited Jun 10 '16 at 23:00

C14L

12,153
4
39
52

answered Jun 10 '16 at 22:52

Vikash Kumar

41
1
5

score 1 · Answer 3 · answered Jun 24 '17 at 22:18

The best that I've been able to do is

$(this).closest('.modal').modal('toggle');

This gets the modal holding the DOM object you triggered the event on (guessing you're clicking a button). Gets the closest parent '.modal' and toggles it. Obviously only works because it's inside the modal you clicked.

You can however do this:

$(".modal:visible").modal('toggle');

This gets the modal that is displaying (since you can only have one open at a time), and triggers the 'toggle' This would not work without ":visible"

How to hide Bootstrap previous modal when you opening new one?

3 Answers3

Linked