jquery - 动态加载多个模态

Question

我的 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，以便它们是唯一的并以这种方式显示每个模态，但我不太确定这是最好的方式

Answer 1

您可以创建一个对话框容器，其中包含一些对话框 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