我构建了一个函数来自动创建模态以节省时间并使代码更有条理，因为我会将与模态内容相关的 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>
测试.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
- 最新数据表
- 时刻（信息）
- scripts.js（带有 new_modal() 函数的 js）
- jquery-确认 v3.3.4