Dmitry S. Dmitry S. - 1 year ago 87
Javascript Question

Bootstrap modals - Close first by clicking second

Good day. I have two instances of bootstrap 3 modals on the page.
For example, first: is "Authorization" modal, and second: is "Forgot password" modal, which calls by link in first modal. The second modal has reverse link for first too. Here is the code (Authorization):

<div class="modal fade" id="modal-authorization" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog authorization" role="document">
<div class="modal-content">
<div class="modal-inner authorization">
<div class="modal-inner__title">
Authorization
</div>
<form action="">
<input class="modal-inner__input" type="text" placeholder="Login" required>
<input class="modal-inner__input" type="password" placeholder="Password" required>
<button class="btn btn-vote" type="submit">Sign In</button>
</form>
<a data-toggle="modal" data-target="#modal-restore">
Forgot Password?
</a>
<a class="modal-close" data-dismiss="modal">X
</a>
</div>
</div>
</div>
</div>


And second modal, "Forgot Password":

<div class="modal fade" id="modal-restore" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog restore" role="document">
<div class="modal-content">
<div class="modal-inner authorization">
<div class="modal-inner__title">
Forgot Password?
</div>
<form action="">
<input class="modal-inner__input" type="email" placeholder="Enter your E-mail" required>
<button class="btn btn-vote" type="submit">Get new Password</button>
</form>
<a data-toggle="modal" data-target="#modal-authorization">
Go to Authorization
</a>
<a class="modal-close" data-dismiss="modal">
X
</a>
</div>
</div>
</div>
</div>




As you can see, I have the link with
data-target="#modal-restore"
which calls the second modal from first and
data-target="#modal-authorization"
which calls the first modal from second.

I need it so that when I open the second or the first window from another, another shall be closed. I can't find the solution to my problem.

Answer Source

Only add the data-dismiss="modal" to the link that open the second modal

<a data-toggle="modal" data-target="#modal-authorization" data-dismiss="modal">
    Go to Authorization
</a>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download