Question

我在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" ...>。我怎么能这样做？

Answer 1

您可以在点击时创建对话框，而不仅仅是显示对话框。以下是jsfiddle的示例。

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

Answer 2

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

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

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

通过JavaScript创建对话框

2 个答案: