引导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");

}

problem是，这与大量的存根混为一谈，我不得不想一想为什么：

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

在某一页

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

• JQuerycontm.js (信息)：如果我在一个模式中有一个按钮(从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>

我相信这与引导的模式有关，但是我在dark.What中我错过了这里吗？提前谢谢你。

JS已加载(按顺序排列)：

• jQuery v3.6.0
• jQuery UI - v1.12.1
• 引导v5.0.0
• 最新数据
• 力矩(信息)
• scripts.js (带有new_modal()函数的js)
• jquery-确认v3.3.4

Answer 1

好的。模态上的tabindex="-1"导致了这种情况的发生。以防万一任何人都有同样的行为。更多信息