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

Answer 2

问题是.html()会覆盖所有模态内容，因此在使用此功能时，它会删除该模式的所有先前html内容，并将其替换为.html()上传递的最新字段。

您可以使用.append()代替.html()。

有一个简单的例子，说明如何动态地在模态对话框中添加字段。

＆＃13;

function openDialog(titleDialog,content){
  $("#dialog").dialog({
    height: 520,
    width: 400,
    modal: true,
    title: titleDialog,
    
    open: function () {
        	$(this).append(content);
          $("#testDiv").css("display","block");
        },
        buttons: {
            Cancel: function () {
               $(this).dialog("close");
            },
        	Save:function(){
        		
        	}
        }
    
  });
  }
  
  $("#openDialog").on('click',function(){
  
  	openDialog("some title",$("#testDiv"));
  });

＆＃13;

#testDiv{
  height:100px;
  width:100px;
  border: solid 2px;
  display:none;
}

#dialog{
  border:solid 1px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<div id="dialog">
</div>

<button id="openDialog">
click to open
</button>

<div id="testDiv">

</div>

＆＃13;

Answer 3

您可以将您的面板代码保存在LoadModalBody函数内的字符串变量中，并保留一个全局modal_id变量，为每个模态分配一个唯一的id，然后将该模态附加到父元素：

import {
  default as React,
  Component,
  PropTypes,
} from "react";

您可以使用 .mymodal 类一次性解除所有模态，也可以使用每个ID关闭特定模态。

动态加载多个模态

3 个答案: