不再能够使用 jQuery 即时创建模式答案

【问题标题】：No longer able to create modal on-the-fly with jQuery不再能够使用 jQuery 即时创建模式
【发布时间】：2022-01-09 08:47:38
【问题描述】：

我仍在尝试移除我的 jQuery 训练轮。我以前有一种方法可以使用 jQuery 即时创建模式。它看起来像这样：

function showTheForm() {

    $rescheduleEmployeeModalHTML = $('<div>', {
        id: "rescheduleEmployeeModal",
        class: "modal",
        tabindex: "-1",
        role: "dialog",
        html: '<div class="modal-dialog modal-lg">' +
            '<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">' +
            '<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>' +
            '<button id="confirm_reschedule" type="button" class="btn btn-primary">Reschedule</button>' +
            '</div>' +
            '</div>' +
            '</div>'
    }).on('shown.bs.modal', function (e) {
        /**
         * directly manipulate the form when shown
         */
    }).on('hidden.bs.modal', function (e) {
        // self-cleanup
        $(this).remove();
    }).on('click', '#confirm_reschedule', function (e) {
        /**
         * explicit click listener
         */
    }).modal({
        backdrop: 'static',
        keyboard: false,
        focus: true,
        show: true
    });

}

showTheForm();

在 Bootstrap 5.1 中，我需要使用原生 JavaScript，但我不知道如何将模式“显化”为存在。

html 不会在 DOM 中。如何即时创建一个并给它一个 id 以便它可以被 bootstrap.Modal.getInstance() 和其他 Bootstrap 方法引用？

我想我已经很接近了。这是我尝试过的，但它会产生错误，如下所示：

    let modal = document.createElement('div');
    modal.id = 'myModal';
    modal.className = 'modal';
    modal.setAttribute('tabindex', -1)
    modal.innerHTML = `<div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Ok</button>
            </div>
        </div>
    </div>`;

    console.log(modal)

    var myModal = new bootstrap.Modal(myModal, {
        backdrop: true,
        keyboard: true,
        focus: true,
        show: true
    })

控制台错误：

modal.js:313 Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
    at Hi._isAnimated (modal.js:313)
    at Hi._initializeBackDrop (modal.js:195)
    at new Hi (modal.js:83)
    at thisIsAFunction (main.js:34)
    at HTMLButtonElement.<anonymous> (main.js:55)
    at HTMLButtonElement.dispatch (jquery-3.6.0.min.js:2)
    at HTMLButtonElement.v.handle (jquery-3.6.0.min.js:2)

【问题讨论】：

var myModal = new bootstrap.Modal(myModal,
我刚刚抓到了，谢谢观看！

标签： jquery twitter-bootstrap bootstrap-modal

【解决方案1】：

我找到了答案，但是如果你能更好地编写代码，我很想看看你是怎么做到的。

基本上，我只需要传入包含 HTML 结构的实际 JavaScript 变量：

    var myModal = new bootstrap.Modal(modal, {
        backdrop: true,
        keyboard: true,
        focus: true,
    })

    myModal.show()

注意new bootstrap.Modal(modal, options)中的小写modal

【讨论】：