Невозможно закрыть Bootstrap Modal с исчезновением

Question

Я использую следующий код для динамического создания модальных всплывающих окон, но я столкнулся с проблемой. Проблема в том, что модал отображается правильно, но я не могу его закрыть. Я пробовал оба 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>

В результате случайного тестирования мне удалось сделать вывод, что удаление класса 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, но у меня их нет. Нет ошибок консоли в браузере, когда проблема не устранена. Кто-нибудь из вас сталкивался с этой проблемой? Я только что обновился до JQuery 3.3.1 и Bootstrap 4.2.1. Просто странно, когда нет эффектов затухания.

PLUNKER

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

Answer 1

JQuery's .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" асинхронно, вы сталкиваетесь с проблемами, потому что это часть структуры DOM, которую Bootstrap использует для обеспечения поведения компонента.

В исходном коде при создании модального поля поле this._dialog объекта Modal получает значение null, поскольку в элементе еще нет соответствующего элемента.Дерево DOM.Тот факт, что он работает, когда вы не используете fade, является случайностью.Случается, что когда вы используете fade, путь кода использует больше this._dialog и, таким образом, больше беспокоит то, что this._dialog установлен на null.Когда вы не используете fade, this._dialog оказывается использованным меньше, и он выглядит , как будто он работает просто отлично, но это удача.Я проследил путь выполнения без fade и увидел какие-то странные вещи.Я ожидал бы столкнуться с проблемами в будущем.

В конечном счете, вы хотите, чтобы ваш диалоговый компонент был всех , присутствующих в DOM, прежде чем вы вызовете .modal("show").