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

Question

I'm using the following code to dynamically generate my modal pop-ups but I encountered a problem. The problem is that the modal appears correctly but I am unable to close it. I've tried both data-dismiss="modal" and .modal("hide") with no avail. I've checked that the button click event gets fired, the only problem is that the modal doesn't close.

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>

Sample Call

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"
    }]);

Sample Output

<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>

Through random testing, I managed to deduce that removing the fade class when generating my modal allows me to close it without any other changes.

From

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

To

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

And my code works but without the fade effects. I've checked all my custom CSS for .fade but I don't have any. There are no console errors on the browser when the issue persist. Have any of you encountered this issue? I've just upgraded to JQuery 3.3.1 and Bootstrap 4.2.1. It just feels weird when there is no fade effects.

PLUNKER

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

Answer 1

JQuery's .load() is asynchronous. The problem is that when .modal("show") executes, the contents of your modal are not loaded yet. If you modify your code to call .modal("show") inside the callback you pass to .load() then it works.

I've forked your plunker so you can test it. I changed the code that creates the dialog element and calls .modal("show") to this:

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");
    });

The principal changes were:

1. Move .appendTo(document.body).modal("show"); inside the callback.

2. Add const $this = $(this) and then use $this.find() to get the pieces of the template to modify.

And at this point, the reader asks "Ok, but wait... why is it working when the OP does not use fade ??"

It's complicated. The basic fact is that generally Bootstrap is not designed to work with partial components. When you invoke a function that tells Bootstrap to use DOM elements as Bootstrap components, all the parts that Bootstrap cares about need to be present . Note that those bits that Bootstrap does not care about don't matter. You could load a paragraph of text to put into the body of a modal asynchronously, or an image, and Bootstrap would work just fine with that. It does not care about these things. But when you load the div that takes class="modal-dialog" asynchronously you run into trouble because that's part of the structure of the DOM that Bootstrap uses to provide behavior to the component.

In your original code, when the modal is created, the this._dialog field of the Modal object gets the value null because there is not yet a matching element in the DOM tree. The fact that it seems to work when you do not use fade is happenstance. It so happens that when you use fade the code path makes more use of this._dialog and is thus more disturbed by this._dialog being set to null . When you do not use fade , this._dialog happens to be used less and it looks like it is working just fine but that's luck. I've traced the execution path without fade and saw some bizarre stuff happening. I'd expect to run into problems down the road.

Ultimately, you want your dialog component to be all present in the DOM before you call .modal("show") .