How to Prevent multi modal open cuncurrent in boostrap

Question

I have 2 Menu Item in Navbar "SignIn" and "SignUp", with user click on each one it's modal appear correctly and there is no problem,

In "SignIn" modal I have a quick link to open "SignUp" modal,

when I click on "SignUp" in "SignIn Modal" the "SignUp" appears concurrent with the previous one,

I want to know how I can prevent two modals open concurrently.

my Markups

<!-- Sign In Modal -->
<div id="signin" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header nopadding">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <div class="login-head">
                    <img src="/{{ directory }}/images/logo.png" />
                </div>
            </div>
            <div class="modal-body">

                <form method="post" id="user-tclogin-form" accept-charset="UTF-8" _lpchecked="1" action="{{ path( "user.login" ) }}"  class="user-login-form" data-drupal-selector="user-login-form" role="form" name="loginform">
                    <div class="form-group headline ">
                        <h3>{{ 'Login with your account or'|t }}<a class="" data-toggle="modal" data-target="#signup"> {{ 'Sign Up'|t }}</a></h3>
                    </div>
                    <div class="form-group">
                        <input type="text" value="{{ username }}"   name="name" tabindex="1" class="form-control" id="name" placeholder="{{ "username or email"|t}}">
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" id="pass" name="pass" placeholder="{{ "Password"|t }}">
                    </div>

                    <input type="submit"  id="tclogin" class="btn btn-lg navbar-btn btn-courses-reverse" value="{{ "Sign In"|t }}" >
                    <div class="form-group remember">
                        <label><input type="checkbox">{{ "Remember me"|t }}</label>
                        <a class="forgetpass" data-toggle="modal" data-target="#forgetpass"> {{ 'Forget Password'|t }}</a>
                    </div>
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />
                </form>
            </div>

        </div>

    </div>
</div>
<!-- Sign Up Modal -->
<div id="signup" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header nopadding">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <div class="login-head">
                    <img src="/{{ directory }}/images/logo.png" />
                </div>
            </div>
            <div class="modal-body">

                <form method="post" id="user-tclogin-form" accept-charset="UTF-8" _lpchecked="1" action="{{ path( "user.login" ) }}"  class="user-login-form" data-drupal-selector="user-login-form" role="form" name="loginform">
                    <div class="form-group headline ">
                        <h3>{{ 'Login with your account or'|t }}<a class="" data-toggle="modal" data-target="#signup"> {{ 'Sign Up'|t }}</a></h3>
                    </div>
                    <div class="form-group">
                        <input type="text" value="{{ username }}"   name="name" tabindex="1" class="form-control" id="name" placeholder="{{ "username or email"|t}}">
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" id="pass" name="pass" placeholder="{{ "Password"|t }}">
                    </div>

                    <input type="submit"  id="tclogin" class="btn btn-lg navbar-btn btn-courses-reverse" value="{{ "Sign In"|t }}" >
                    <div class="form-group remember">
                        <label><input type="checkbox">{{ "Remember me"|t }}</label>
                        <a class="forgetpass" data-toggle="modal" data-target="#forgetpass"> {{ 'Forget Password'|t }}</a>
                    </div>
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />
                </form>
            </div>

        </div>

    </div>
</div>

this [answer](http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new/28352458#28352458) might help — Mahmoud, Jul 14 '16 at 14:00

score 0 · Accepted Answer · edited May 23 '17 at 11:51

0

According to this solution, it only need add data-dismiss="modal".

So

<a class="" data-toggle="modal" data-dismiss="modal" data-target="#signup"> {{ 'Sign Up'|t }}</a>

edited May 23 '17 at 11:51

Community

1
1

answered Jul 17 '16 at 08:16

Yuseferi

7,931
11
67
103

How to Prevent multi modal open cuncurrent in boostrap

1 Answers1