动态加载多个模态

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,并在以后需要时使用它.

您可以在此处找到工作示例:http://zikro.gr/dbg/html/jq-modal.html