Question

我在Navbar“SignIn”和“SignUp”中有2个菜单项，用户点击它们的模态正确显示并且没有问题，

在“SignIn”模式中，我有一个快速链接来打开“SignUp”模式，

当我点击“SignIn Modal”中的“SignUp”时，“SignUp”会与前一个同时出现，

我想知道如何防止两个模态同时打开。

我的标记

<!-- 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>

Answer 1

根据this solution，只需添加data-dismiss="modal"。

所以

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

如何在boostrap中防止多模态开放的cuncurrent

1 个答案: