通过 JavaScript 创建对话框

Creating dialog via JavaScript

本文关键字：对话框 创建 JavaScript 通过      更新时间：2023-09-26

我在JSFiddle上尝试了以下内容：

.HTML：

<div id="dialog" title="Basic dialog">
  <p>Hello.</p>
</div>
<a href="www.google.com">Link</a>

JavaScript

$(document).ready(function() {
    $( "#dialog" ).dialog({ autoOpen: false }); 
    $(document.body).on('click',"a",function(event){ 
        if ($(this).hasClass('ui-dialog-titlebar-close')) return;
        event.preventDefault();        
        $("#dialog").dialog('open');
    });  
});

我想实现同样的功能，但通过JavaScript创建对话框。也就是说，我不想在 HTML 中使用<div id="dialog" ...>。我该怎么做？

您可以在单击时创建对话框，而不仅仅是显示对话框。 这是jsfiddle上的一个例子。

基本上，您创建 DOM 节点并直接通过它应用对话框。这就是$(HTML HERE).dialog()方法可以完成的操作。

您可以静态添加自己的自定义 HTML 并将其 .append（） 添加到 body 元素或其他一些div，就像在这个 jsFiddle 中一样。

您必须自己定位和设置其样式（通过为其提供适当的 CSS 类或使用 style 属性）。您可以使用浏览器开发人员工具查看jQuery-UI对话框div并"借用"其CSS作为位置/样式提示=）尽管我强烈建议只使用jQuery UI对话框（因为它处理打开/关闭方面，可以选择背景模式，按钮等）。这就是图书馆的用途！;)

您还可以通过各种方式动态检索 HTML，例如 AJAX 或许多其他方法。

相关文章：