How to close one bootstrap modal form if another one is opening?

We are using the bootstrap modal forms module for both the user registration and user login pages (admin/config/user-interface/bootstrap_modal_forms). We need to link to the login modal from the register modal, and likewise link to the register modal from the login modal. For example, when the register modal opens, at the bottom of the modal we need to display the following text:

Have an account? Sign in

Where the sign in text links to the login modal.

This doesn't work correctly though.

When the register modal is open, clicking on the Sign in link opens the login modal behind the register modal (unless the user notices this, they will only see the register modal hiding the login modal).

When the login modal is open, clicking on the register link opens the register modal in front of the login modal (this happens to be ok, but I really think the login modal should close).

I have been looking around at how to close one bootstrap modal when another opens, but none of the solutions seem to work. https://codepen.io/elmahdim/pen/azVNbN for example doesn't solve the problem.

From the above I tried the following:

I am overriding the bootstrap-modal-forms--register.tpl.php in my subtheme and added the following:

<p>Have an account? <a href="https://community.apigee.com/user/login" data-toggle="modal" data-target="#login">Sign in</a></p>

Likewise I am overriding the boostrap-modal-forms--login.tpl.php in my subtheme and added the following:

<p>Don't have an account? <a href="https://community.apigee.com/user/register" data-toggle="modal" data-target="#register">Register</a></p>

The codepen solution suggests that adding

data-toggle="modal" data-target="#[ID]"

should cause the modal to close and the other modal to open, but I don't see anything changing in the modal behavior when I add the data-toggle and data-target attributes to the link.

0 3 29.4K
3 REPLIES 3

Edit: I also tried adding

data-dismiss="modal"

To the Sign In/Register links but that didn't change the current behavior in any way.

Should have looked a little harder at https://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new

Not sure if this is the 'best' solution but it works. I added a class="close-modal" to each of my Sign In/Register links and then added the following to my theme's js

// Hide modal on opening another modal
$('.close-modal', '#register').click(function() {
$('#register').modal('hide');
});
$('.close-modal', '#login').click(function() {
$('#login').modal('hide');
});

Seems to be working.