Question

我有这个问题需要打开多个模态。好的是，在我打开一个新模态之前，可以关闭现有模态。当正常打开一个模态时，我会将一个类应用于名为＆＃34; modal-open＆＃34; 的一个类，它将 overflow：hidden 应用于正文。

我创建了这个脚本：

var login = function () {

    var handleRegister = function () {

        $("a").click(function (e) {
            var target = $(this).data("target");

            if (target) {
                var visible = $(target).is(":visible");

                if (!visible) { 
                    $('.modal').each(function () {
                        $(this).modal('hide'); // hide existing modals
                    });

                    $(target).modal('show');
                }

                e.preventDefault();
            }
        });
    }

    return {
        init: function () {
            handleRegister();
        }
    }
}();

正如您所看到的，我遍历任何现有的模态并关闭它们（我假设它调用 hidden.bs.modal 并从中移除模态打开类在这些运行之后我在目标上调用 show 方法。问题是模态打开类未应用于正文。

我在show show之后尝试添加 $（＆＃34; body＆＃34;）。addClass（＆＃34; modal-open＆＃34;），但未添加该类。

以前有人遇到过这个吗？

Answer 1

我通过挂钩隐藏/显示的模态事件来解决这个问题。我修改过的脚本如下所示：

    var login = function () {

        var handleRegister = function () {

            $("a, button").click(function (e) {
                var target = $(this).data("target");
                var type = $(this).data("type");

                if (target && type) {
                    var visible = $(target).is(":visible");

                    if (!visible) {                    
                        var available_height = $(window).height() - $('.topbar').outerHeight();
                        var content = $('.modal-content', target);
                        content.height(available_height);

                        $('.modal').each(function () {
                            $(this).modal('hide'); // hide all existing modals
                        });

                        $(target).modal('show');
                    }

                    e.preventDefault();
                }
            });

            $('.modal').on('hidden.bs.modal', function (e) {
                $("body").removeClass("modal-open");
            });

            $('.modal').on('shown.bs.modal', function (e) {
                $("body").addClass("modal-open");
            });
        }

        return {
            init: function () {
                handleRegister();
            }
        }
    }();

我不确定为什么这会起作用，因为我预计这将是模态脚本中发生的事情。但它有效，所以嘿嘿。

Answer 2

这是我的解决方案：

<小时/> 在打开第二个模态之前：

hasAlreadyModalOpen = $("BODY").hasClass("modal-open");
mySecondModal.modal("show");

mySecondModal.on('hidden.bs.modal', function (e) {
    if (hasAlreadyModalOpen) {
        $("body").addClass("modal-open");
    }
});

Answer 3

一个非常古老的问题，但简化的答案，因为这对搜索结果很高，但仍然是一个问题。为任何辅助模态添加其他类，例如sub-modal然后挂入他们隐藏的事件将简化这一点。

$(document).on("hidden.bs.modal",".sub-modal.modal", function () {
    $("body").addClass("modal-open");
});

bootstrap打开多个模态问题

3 个答案: