bootstrap在打开新模态之前关闭所有打开的模态

Question

bootstrap在打开新模态之前关闭所有打开的模态

我有一种情况,我使用了许多模态(登录表单,注册表单,传递检索表单等).如果用户单击"登录"然后"注册"他们会发生什么将两个模态相互叠加.我想bootstrap在打开一个新模态之前自动关闭所有打开的模态.理想情况下也等待动画.

有没有人做过什么？我有以下解决方案,但我需要每次都针对该功能.

function close_modal() {
    $('.modal').modal('hide')
}

Run Code Online (Sandbox Code Playgroud)

如何将其绑定到每个打开的模态？

我正在使用Bootstrap v3.3.4

Answer 1

Ken*_*Ken 13

根据Bootstrap的网站

不支持多个打开模态确保不打开模态而另一个模态仍然可见.一次显示多个模态需要自定义代码.

我尝试使用javascript同时打开多个模态,这导致第二个模式不响应点击等事件.

因此,如果您只是单击网页,则不会同时显示两个多个模态.

这是链接 Bootstrap Modals

============在这里编辑===============

你可以试试这个

$('.modal').on('show.bs.modal', function () {
    $('.modal').not($(this)).each(function () {
        $(this).modal('hide');
    });
});

Run Code Online (Sandbox Code Playgroud)

因此,在模态出现之前,此脚本将尝试关闭所有其他模态.

这是我使用的测试html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Modal Test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
    <div class="modal fade" id="modal_1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h4 class="modal-title">Title1</h4>
                </div>
                <div class="modal-body">
                    <p>Body1</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-default" id="launchSecond">Second</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal_2">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h4 class="modal-title">Title2</h4>
                </div>
                <div class="modal-body">
                    <p>Body2</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-default" id="launchFirst">First</button>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-2 col-md-offset-5">
                <button type="button" class="btn btn-success" id="launchModalBtn">Launch Modal</button>
            </div>
        </div>
    </div>
</body>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
        $(document).on('click','#launchModalBtn',function () {
            $('#modal_1').modal();
        });

        $(document).on('click', '#launchSecond', function () {
            $('#modal_2').modal();
        })

        $(document).on('click', '#launchFirst', function () {
            $('#modal_1').modal();
        })

        $('.modal').on('show.bs.modal', function () {
            $('.modal').not($(this)).each(function () {
                $(this).modal('hide');
            });
        });
    </script>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，5 月前
查看次数：	9692 次
最近记录：	6 年，2 月前