Question

美好的一天。我在页面上有两个bootstrap 3模态实例。
例如，first：是“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>

第二个模式，“忘记密码”：

<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"从第二个调用第一个模态。

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

Answer 1

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

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

Answer 2

从关闭按钮中删除data-dismiss属性。通过点击事件使用弹出方法调用关闭模式弹出窗口。

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

Bootstrap模态 - 首先点击第二个

2 个答案: