0

我在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 创建对话框。也就是说，我不想<div id="dialog" ...>在 HTML 中有 。我怎样才能做到这一点？

4

2 回答 2

3

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

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

于 2013-09-08T00:56:10.007 回答
1

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

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

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

于 2013-09-08T00:51:21.563 回答