无法关闭带有淡入淡出的Bootstrap模式

时间：2019-01-22 07:31:01

标签： javascript jquery bootstrap-4 bootstrap-modal

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

JS 

// Requires jQuery
var dialogHelper = new dialog();

function dialog() {
    /* Bootstrap Modal Dialog
    *  Displays message from parameter
    */
    this.ShowModalDialog = function (message, title, buttons) {
        var dialogMessage = "";
        var dialogTitle = "System Message";
        var dialogButtons = [];

        if (message)
            dialogMessage = message;
        if (title)
            dialogTitle = title;
        if (buttons) {
            dialogButtons = buttons;
        }

        var id = randomString(10);

        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("/Static/BootstrapDialogTemplate.html", function () {
                $("#" + id + " .modal-title")
                    .attr("id", id + "Label")
                    .text(dialogTitle);
                $("#" + id + " .modal-body").text(dialogMessage);

                var footer = $("#" + id + " .modal-footer");

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

/* Automatically destroy modal on close */
$(".modal").on('hidden.bs.modal', function () {
    $(this).data('bs.modal', null);
});

function randomString(length) {
    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
    var string_length = length;
    var randomstring = '';

    for (var i = 0; i < string_length; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        randomstring += chars.substring(rnum, rnum + 1);
    }

    return randomstring;
};

/Static/BootstrapDialogTemplate.html 

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

示例通话 

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

示例输出 

<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;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="2tF5r5mecTLabel">System Message</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">Are you sure you want to create this item?</div>
            <div class="modal-footer">
            <button class="btn btn-primary" data-dismiss="modal">Yes</button><button class="btn btn-secondary" data-dismiss="modal">No</button></div>
        </div>
    </div>
</div>
<div class="modal-backdrop fade show"></div>

enter image description here

通过随机测试，我设法推断出在生成模式时删除fade类可以使我关闭它而无需进行任何其他更改。

来自

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

收件人

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

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

PLUNKER

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

1 个答案:

答案 0 :(得分：2)

JQuery的.load()是异步的。 问题在于，当执行.modal("show")时，模态的内容尚未加载。如果您修改代码以在回调函数中调用.modal("show")，则会传递给{{1 }}，然后就可以使用。

我forked是您的助听器，以便您对其进行测试。我更改了创建对话框元素的代码，并为此调用.load()：

.modal("show")

主要更改为：

  1. 在回调中移动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"); }); 。

  2. 添加.appendTo(document.body).modal("show");，然后使用const $this = $(this)获取要修改的模板部分。

这时，读者问：“好吧，等等……为什么当OP不使用$this.find()时，它为什么起作用？”

这很复杂。基本事实是，通常 Bootstrap并非设计用于部分组件。当您调用告诉Bootstrap使用DOM元素作为Bootstrap组件的函数时， Bootstrap关心的所有部分都必须存在。请注意，Bootstrap无关的那些位无关紧要。您可以加载一段文本以异步方式放置到模式主体或图像中，Bootstrap可以很好地工作。它不在乎这些东西。但是，当您异步加载占用fade的{​​{1}}时，您会遇到麻烦，因为这是Bootstrap用于向组件提供行为的DOM结构的一部分。

在您的原始代码中，创建模态后，div对象的this._dialog字段将获得值class="modal-dialog"，因为DOM树中还没有匹配的元素。不使用Modal时似乎起作用的事实是偶然的。碰巧的是，当您使用null时，代码路径更多地使用了fade，因此更受fade设置为this._dialog的干扰。当您不使用this._dialog时，null的使用量会减少，并且看起来看起来工作正常，但这很幸运。我已经跟踪了没有fade的执行路径，并看到了一些奇怪的事情。我希望以后会遇到问题。

最终，您希望在调用this._dialog之前，对话框组件在DOM中全部存在。

相关问题
最新问题