引导模式 - 单击第二个先关闭



美好的一天。我在页面上有两个引导 3 模式的实例。例如,第一个:是"授权"模式,
第二个:是"忘记密码"模式,它通过第一个模态中的链接调用。第二个模态也有第一个反向链接。这是代码(授权(:

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

第二种模式,"忘记密码":

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

如您所见,我与data-target="#modal-restore"有链接,它从第一个模式调用第二个模态,data-target="#modal-authorization"从第二个模态调用第一个模态。

我需要它,以便当我从另一个窗口打开第二个或第一个窗口时,另一个窗口将被关闭。我找不到解决问题的方法。

仅将data-dismiss="modal"添加到打开第二个模式的链接

<a data-toggle="modal" data-target="#modal-authorization" data-dismiss="modal">
    Go to Authorization
</a>

从关闭按钮中删除数据消除属性。通过单击事件使用弹出方法调用关闭模式弹出窗口。

    function close(id) {
      $('#id').modal("hide")
    }

相关内容

最新更新