通过使用 JQuery 注入 HTML 来加载模态对话框答案

【问题标题】：Load Modal dialog by injecting HTML with JQuery通过使用 JQuery 注入 HTML 来加载模态对话框
【发布时间】：2023-04-07 23:53:01
【问题描述】：

我的 JS 文件中有以下函数，它为 here 中定义的模态对话框定义了 HTML 代码

我已经复制了 HTML 代码并分配给我的 JS 函数的一个变量：

function loadModalDialog(p1) {

     var modal =     '<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">' +
                    '   <div class="modal-header">' +
                    '       <button type="button" class="close" data- dismiss="modal" aria- hidden="true" >×</button>' +
                    '       <h3 id= "myModalLabel"> Modal header </h3>' +
                    '   </div>' +
                    '   <div class="modal-body">' +
                    '       <p>One fine body…</p>' +
                    '   </div>' +
                    '   <div class="modal-footer">' +
                    '       <button class="btn" data- dismiss="modal" aria- hidden="true"> Close </button>' +
                    '       <button class="btn btn-primary"> Save changes </button>' +
                    '   </div>' +
                    '</div>';  


}

另外，我还有另一个调用 loadModalDialog 的 JS 函数，但此时我不确定如何将我在模态变量上的 html 注入到 DOM 中，一旦我在上述函数内部，我就可以显示模态对话框.

顺便说一句，我想通过 JS 函数注入 html，因为最终我会改变对话框的主体，它会根据 p1 值动态变化。

顺便说一句，调用 loadModalDialog 的代码行如下所示：

<a href="" role="button" onClick=loadModalDialog("' + p1 + '") data-toggle="modal">PopUp</a>

知道它应该如何工作吗？

【问题讨论】：

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

可能是一种方法。诀窍是建立一个合适的选择器来调用 dialog() 函数：

$("<div>Sample of an injected dialog</div>").dialog();

如果你对比一下 jquery 示例，实际上并不是很容易

$( "#dialog" ).dialog();

您只需将选择器替换为具体文本（无元字符）。

如果您想在对话框加载后立即执行 js 函数，您可以内联该函数并通过 JSON 字符串化提供它的参数。像这样

$("<div id='difflv2d'></div><script>drawGraph("
  + JSON.stringify(sd.side) + "," + JSON.stringify(sd.id) + ","
  + JSON.stringify(sd.title) + "," + JSON.stringify(sd.num) + ","
  + JSON.stringify(sd.data) + ")</script>").dialog();

在上面的示例中，绘图函数选择由 id 'difflv2d' 给出的 div 并将其内容放在上面。由于 div 已经是对话框的一部分（刚刚加载），因此图形出现在该对话框中。绘制的东西是从正确提供的变量中读出的。

这是一个参考：on the fly div

【讨论】：