Bootstrap 5 模态冲突

Question

我构建了一个函数来自动创建模态以节省时间并使代码更有条理，因为我会将与模态内容相关的 html 和 js 都放在一个 php 文件中，而不是全部混合在文件中调用模态：

function new_modal(title, content_php, attrs = []) {
    //creates html of modal
    html = '<div class="modal fade" id="main_modal" tabindex="-1" role="dialog">' +
        '<div class="modal-dialog modal-xl">' +
        '<div class="modal-content">' +
        '<div class="modal-header">' +
        '<h5 class="modal-title">' + (title || 'New Modal') + '</h5>' +
        '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>' +
        '</div>' +
        '<div id="modal_content_loader" class="modal-body">' +
        '<p>Modal body text goes here.</p>' +
        '</div>' +
        '</div>' +
        '</div>' +
        '</div>';
    //attach hmtl to page
    $('body').append(html);

    //load php and show modal
    $("#modal_content_loader").load("modals/" + content_php, function() {
        $('#main_modal').modal({ show: true });
    });
    //(event)
    $('#main_modal').on('shown.bs.modal', function(event) {
            ...
        })
    //(event) + on close remove html from page
    $('#main_modal').on('hide.bs.modal', function(event) {
        ...
        $("#main_modal").remove();
    })
    //show modal
    $("#main_modal").modal("show");

}

问题是这与很多东西相冲突，我必须知道为什么：

• Ajax 请求：表单内具有提交类型的按钮使页面在单击时重新加载，而不是提交表单：

在某个页面

<button onclick="new_modal('teste','test.php')">Open Modal</button>

test.php

<form class="form">
    <label for="inputPassword5" class="form-label">Field</label>
    <input type="text" class="form-control">
    <button class="btn btn-success" type="submit">Submit</button>
</form>

• Jquery-confirm.js (info)：如果我有一个模态按钮（来自 new_modal()），带有 onclick=($.confirm()) 和我输入的内容一些 html，例如带有输入的表单，我无法专注于它，唯一可能的交互是使用插件按钮（确认/取消）：

<button onclick="open_confirm()">Open</button>
<script>
function open_confirm() {

        $.confirm({
            title: 'Validate Password',
            content: '<form class="form">'+
                    '<label for="inputPassword5" class="form-label">Password</label>'+
                    '<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">'+
                    '</form>',
            buttons: {
                confirm: function() {},
                cancel: function() {},
            }
        });
    }
</script>

我相信这与引导程序中的模式有关，但我在黑暗中。我在这里缺少什么？ 提前谢谢你。

JS 加载（按顺序）：

• jQuery v3.6.0
• jQuery UI - v1.12.1
• 引导程序 v5.0.0
• 最新数据表
• 时刻 (info)
• scripts.js（带有 new_modal() 函数的 js）
• jquery-confirm v3.3.4

Answer 1

好的。 tabindex="-1" on modal 导致这种情况发生。以防万一任何人有同样的问题。 more info