Bootstrap 3：如何使用jQuery关闭弹出窗口？

Question

我的代码中有两个弹出窗口。第一个是用于登录的，第二个是用于重置密码的。 第二个弹出窗口的链接在登录弹出窗口内。我想在单击“忘记密码”链接时自动关闭登录弹出窗口。

<a href="#" data-toggle="modal" data-target=".loginform">Login</a>
<!- Login Popup start-->

<div id="login" class="modal fade loginform" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    ....
    <label>
        <input type="checkbox"><span style="font-size:12px;display:block;">Remember me</span>
    </label>
</div>
</div>
</div>


</div>
<div class="modal-footer">
    <a data-toggle="modal" data-target=".forgotpassword" href="#" style="float:left;font-size:14px;">Forgot Password</a>
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Login</button>
</div>
</div>
<!-- /.modal-content -->
</div>
</div>


<!- popuplogin end-->
<!- Popup forgot password start-->

<div id="forgot" class="modal fade forgotpassword" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    .......
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Reset</button>
    </div>
</div>
<!-- /.modal-content -->
</div>
</div>


<!- popup end-->

Jsfiddle demo

- mridul

---

你真的需要修复缩进。 - Sully

你真的认为一个模态框在另一个模态框之上是良好的用户体验设计吗？我不这么认为。 - Michael Pasqualone

当点击第二个链接时，我想关闭第一个模型。我对UX设计不是很了解，但我会尝试做到。 - mridul

我猜你是指Bootstrap 2？因为Bootstrap 3默认不支持重叠的模态框。而且，我想首先只在一个模态框中交换内容是否更方便，而不是关闭和打开两个模态框。 - gpgekko

Answer 1

为忘记密码链接保留一个 ID，当点击链接时执行 $('#login').modal('hide');

$("#forgotPass").click(function(){
       $('#login').modal('hide');
});

FIDDLE

- yashhy

Answer 2

在这份文档中：http://getbootstrap.com/javascript/#modals 显示： $('#myModal').modal('show'); 隐藏： $('#myModal').modal('hide');

- Ivan Seidel

---

@mridul 我不是第一个回答了吗？ - Ivan Seidel