无法通过淡入淡出关闭 Bootstrap 模态

Question

我正在使用以下代码动态生成模式弹出窗口，但遇到了问题。问题是模式显示正确，但我无法关闭它。我已经尝试过data-dismiss="modal"并且.modal("hide")都没有效果。我已经检查过按钮单击事件是否被触发，唯一的问题是模式没有关闭。

\n\n

JS

\n\n

// Requires jQuery\nvar dialogHelper = new dialog();\n\nfunction dialog() {\n    /* Bootstrap Modal Dialog\n    *  Displays message from parameter\n    */\n    this.ShowModalDialog = function (message, title, buttons) {\n        var dialogMessage = "";\n        var dialogTitle = "System Message";\n        var dialogButtons = [];\n\n        if (message)\n            dialogMessage = message;\n        if (title)\n            dialogTitle = title;\n        if (buttons) {\n            dialogButtons = buttons;\n        }\n\n        var id = randomString(10);\n\n        jQuery("<div/>", {\n            id: id,\n            class: "modal fade",\n            // href: \'http://google.com\',\n            //title: title,\n            //rel: \'external\',\n            //text: message\n        })\n            .attr("tabindex", "-1")\n            .attr("role", "dialog")\n            .attr("aria-labelledby", id + "Label")\n            .attr("aria-hidden", true)\n            .attr("data-backdrop", "static")\n            .attr("data-keyboard", false)\n            .load("/Static/BootstrapDialogTemplate.html", function () {\n                $("#" + id + " .modal-title")\n                    .attr("id", id + "Label")\n                    .text(dialogTitle);\n                $("#" + id + " .modal-body").text(dialogMessage);\n\n                var footer = $("#" + id + " .modal-footer");\n\n                dialogButtons.forEach(function (element) {\n                    $(\'<button/>\', {\n                        text: element.Text,\n                        click: function () {\n                            if (element.Event) {\n                                element.Event();\n                            }\n                        },\n                        class: element.Class\n                    })\n                        .attr("data-dismiss", "modal")\n                        .appendTo(footer);\n                });\n            })\n            .appendTo(document.body)\n            .modal("show");\n    };\n};\n\n/* Automatically destroy modal on close */\n$(".modal").on(\'hidden.bs.modal\', function () {\n    $(this).data(\'bs.modal\', null);\n});\n\nfunction randomString(length) {\n    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";\n    var string_length = length;\n    var randomstring = \'\';\n\n    for (var i = 0; i < string_length; i++) {\n        var rnum = Math.floor(Math.random() * chars.length);\n        randomstring += chars.substring(rnum, rnum + 1);\n    }\n\n    return randomstring;\n};\n

\n\n

/静态/BootstrapDialogTemplate.html

\n\n

<div class="modal-dialog" role="document">\n    <div class="modal-content">\n        <div class="modal-header">\n            <h5 class="modal-title"></h5>\n            <button type="button" class="close" data-dismiss="modal" aria-label="Close">\n                <span aria-hidden="true">&times;</span>\n            </button>\n        </div>\n        <div class="modal-body">\n        </div>\n        <div class="modal-footer">\n        </div>\n    </div>\n</div>\n

\n\n

调用示例

\n\n

dialogHelper.ShowModalDialog("Are you sure you want to create this item?", null, [{\n        Text: "Yes",\n        Event: function () { alert("YES!"); },\n        Class: "btn btn-primary"\n    }, {\n        Text: "No",\n        Event: function () { },\n        Class: "btn btn-secondary"\n    }]);\n

\n\n

样本输出

\n\n

<div id="2tF5r5mecT" class="modal fade show" tabindex="-1" role="dialog" aria-labelledby="2tF5r5mecTLabel" data-backdrop="static" data-keyboard="false" aria-modal="true" style="display: block;">\n    <div class="modal-dialog" role="document">\n        <div class="modal-content">\n            <div class="modal-header">\n                <h5 class="modal-title" id="2tF5r5mecTLabel">System Message</h5>\n                <button type="button" class="close" data-dismiss="modal" aria-label="Close">\n                    <span aria-hidden="true">\xc3\x97</span>\n                </button>\n            </div>\n            <div class="modal-body">Are you sure you want to create this item?</div>\n            <div class="modal-footer">\n            <button class="btn btn-primary" data-dismiss="modal">Yes</button><button class="btn btn-secondary" data-dismiss="modal">No</button></div>\n        </div>\n    </div>\n</div>\n<div class="modal-backdrop fade show"></div>\n

\n\n

\n\n

通过随机测试，我设法推断出删除fade在生成模式时删除该类允许我在不进行任何其他更改的情况下关闭它。

\n\n

从

\n\n

jQuery("<div/>", {\n        id: id,\n        class: "modal fade",\n        // href: \'http://google.com\',\n        //title: title,\n        //rel: \'external\',\n        //text: message\n    })\n

\n\n

到

\n\n

jQuery("<div/>", {\n        id: id,\n        class: "modal",\n        // href: \'http://google.com\',\n        //title: title,\n        //rel: \'external\',\n        //text: message\n    })\n

\n\n

我的代码可以工作，但没有淡入淡出效果。我已经检查了所有自定义 CSS.fade但没有。当问题仍然存在时，浏览器上不会出现控制台错误。你们有人遇到过这个问题吗？我刚刚升级到 JQuery 3.3.1 和 Bootstrap 4.2.1。当没有淡入淡出效果时，感觉很奇怪。

\n\n

笨蛋

\n\n

https://next.plnkr.co/edit/71QNigcwmUombEQ8?open=lib%2Fscript.js&preview

\n

Answer 1

JQuery.load()是异步的。问题是，当.modal("show")执行时，模态的内容尚未加载。如果您修改代码以在.modal("show")您传递给的回调内部调用，.load()那么它就可以工作。

我已经分叉了你的插件，所以你可以测试它。我更改了创建对话框元素并调用它的代码.modal("show")：

jQuery("<div/>", {
    id: id,
    class: "modal fade",
    // href: 'http://google.com',
    //title: title,
    //rel: 'external',
    //text: message
})
    .attr("tabindex", "-1")
    .attr("role", "dialog")
    .attr("aria-labelledby", id + "Label")
    .attr("aria-hidden", true)
    .attr("data-backdrop", "static")
    .attr("data-keyboard", false)
    .load("BootstrapDialogTemplate.html", function () {
        const $this = $(this);
        $this.find(".modal-title")
            .attr("id", id + "Label")
            .text(dialogTitle);
        $this.find(".modal-body", this).text(dialogMessage);

        var footer = $this.find(".modal-footer", this);

        dialogButtons.forEach(function (element) {
            $('<button/>', {
                text: element.Text,
                click: function () {
                    if (element.Event) {
                        element.Event();
                    }
                },
                class: element.Class
            })
                .attr("data-dismiss", "modal")
                .appendTo(footer);
        });
        $this.appendTo(document.body)
            .modal("show");
    });

主要变化是：

1. 移动.appendTo(document.body).modal("show");到回调内部。

2. 添加const $this = $(this)然后使用$this.find()来获取要修改的模板片段。

此时，读者会问“好吧，但是等等……为什么当 OP 不使用时它还能工作fade？？”

情况很复杂。基本事实是， Bootstrap通常不适合与部分组件一起使用。当您调用告诉 Bootstrap 使用 DOM 元素作为 Bootstrap 组件的函数时，Bootstrap 关心的所有部分都需要存在。请注意，Bootstrap 不关心的那些位并不重要。您可以加载一段文本以异步方式放入模式主体中，或者加载一张图像，Bootstrap 可以很好地处理这些问题。它不关心这些事情。但是，当您异步加载div所需的内容时class="modal-dialog"，您会遇到麻烦，因为这是 Bootstrap 用于向组件提供行为的 DOM 结构的一部分。

在原始代码中，当创建模态时，对象this._dialog的字段Modal会获取值null，因为 DOM 树中还没有匹配的元素。事实上，当你不使用时它似乎可以工作，fade这是偶然的。碰巧，当您使用fade代码路径时，会更多地使用该路径this._dialog，因此会因this._dialog设置为而受到更多干扰null。当你不使用时fade，this._dialog碰巧使用得较少，看起来它工作得很好，但那是运气。我追踪了没有的执行路径fade，并看到了一些奇怪的事情发生。我预计将来会遇到问题。

最终，您希望在调用之前对话框组件全部.modal("show")存在于 DOM 中。