我的 index.php 页面上有 HTML,它是一个 JQuery 模态框(默认隐藏)
然后我有了这个显示模式并填充其标题和内容的功能。
当我调用它时,它会替换模式中的所有先前内容,因为它具有相同的 ID。
有没有一种方法可以动态创建模态以显示多个彼此背后
function LoadModalBody(content, title) {
title = title || '';
$( "#modal_page" ).fadeIn("slow");
$( "#modal_title" ).html(title);
$("#modal_close_button").click(function(){ CloseModal(); });
$( "#modal_page_body" ).html(content);
//$("html, body").animate({ scrollTop: 0 }, "slow");
}
关闭模态框的函数是这样的:
function CloseModal(reloadflag) {
reloadflag = reloadflag || '';
$("#modal_page").fadeOut();
if(reloadflag === 'Y') {
location.reload();
}
}
我想为函数内的每个模态创建一个 ID,以便它们是唯一的并以这种方式显示每个模态,但我不太确定这是最好的方式
最佳答案
您可以创建一个对话框容器,其中包含一些对话框 html 架构,然后创建一个函数,该函数将基于该架构创建新对话框,当然还有您的内容:
HTML
<div id="dialogs">
<div class="dialog-tmpl">
<div class="dialog-body"></div>
</div>
</div>
CSS
.dialogs {
display:none;
}
JS
var createNewDialog = (title, body) => {
var $newDialog = $('#dialogs .dialog-tmpl').clone();
$('.dialog-body', $newDialog).html(body);
$('#dialogs').append($newDialog);
$newDialog.dialog({
'title': title
});
return $newDialog;
};
现在,当你想打开一个新的对话框时,你只需调用这个带有参数的函数,你就会得到一个新的对话框:
$('#open-dialog').on('click', function(e) {
var $dlg = createNewDialog('Dialog title', '<h3>Some HTML content</h3>');
});
您将拥有由该函数返回的创建的新对话框,因此您可以进一步操作对话框弹出窗口。例如,如果您想关闭一个对话框,您现在必须将 javascript 变量与 createNewDialog
返回的对话框一起使用,如下所示:
$dlg.dialog('close');
当然,您必须管理如何存储对话框,以便您可以通过所有代码访问它们。有很多方法可以控制动态元素,您甚至可以为每个对话框分配唯一的 ID,并在以后需要时使用它。
您可以在此处找到工作示例:https://zikro.gr/dbg/html/jq-modal.html
关于jquery - 动态加载多个模态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45195620/