如何在没有指定 html div 的情况下使用 jquery-ui 创建对话框答案

【问题标题】：How to create a dialog using jquery-ui without html div specified如何在没有指定 html div 的情况下使用 jquery-ui 创建对话框
【发布时间】：2011-09-02 16:26:06
【问题描述】：

使用 jquery-ui 创建对话框非常简单：

<script>
$(function() {
    $( "#dialog" ).dialog();
});
</script>

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be   moved, resized and closed with the 'x' icon.</p>
</div>

...但是仍然需要在 HTML 中添加一个 div 才能正常工作。在道场：

var dlg = new dijit.Dialog({
    title:"dialog",
    style: "width:30%;height:300px;"
});
dlg.show();

没有在 html 部分中指定任何内容就可以做到这一点，jquery-ui 可以做到这一点吗？（我必须在这里使用 jquery-ui）谢谢，

大卫

【问题讨论】：

标签： jquery-ui dialog

【解决方案1】：

虽然我不确定您为什么要打开一个没有内容的对话框，但您可以轻松地动态创建一个新对话框并针对它调用 jquery 对话框：

$("<div>hello!</div>").dialog();

【讨论】：

感谢您的快速回复，我自己也找到了答案 :-) var $dialog = $('
') .html('这个对话框每次都会显示！' ) .dialog({ autoOpen: false, title: '基本对话框' });
如何在对话框中打开一个 url，顺便说一句，这里越来越贪心了 :-)
你使用 load() jquery 方法：$("
hello!
").load(url).dialog();
另外，fancybox 也有一些非常不错的一流支持：fancybox.net（我个人最喜欢的）
谢谢，但 .load(url).dialog() 也会刷新主页，并给我错误：错误：尝试在已清除的范围上运行 compile-and-go 脚本

【解决方案2】：

基本代码

var d = $("#someId");
if (d.length < 1)
    d = $("<div/>").attr("id", "someId")
                   .appendTo("body");
else
    d.dialog('destroy');
d.html('some message')
 .dialog({ some_options })
 .dialog("open");

你也许可以把 rap 放在一个扩展方法中。

更新（我的完整代码清单）

(function($) {
    $.extend({
        showPageDialog: function (title, content, buttons, options) {
            /// <summary>Utility to show a dialog on the page. buttons and options are optional.</summary>
            /// <param name="buttons" type="Object">Dialog buttons. Optional, defaults to single OK button.</param>
            /// <param name="options" type="Object">Additional jQuery dialog options. Optional.</param>
            if (!buttons)
                buttons = { "Ok": function () { $(this).dialog("close"); } };
            var defOptions = {
                autoOpen: false,
                modal: true,
                //show: "blind",
                //hide: "explode",
                title: title,
                buttons: buttons
            };
            if (options)
                defOptions = $.extend(defOptions, options);
            var pd = $("#pageDialog");
            if (pd.length < 1)
                pd = $("<div/>").attr("id", "pageDialog")
                                .appendTo("body");
            else
                pd.dialog('destroy');
            pd.html(content)
              .dialog(defOptions)
              .dialog("open");
        }
    }//end of function show...
  )//end of extend Argument
})(jQuery)

示例用法

$.showPageDialog(title, message, {
                "Yes": function () {
                    $(this).dialog("close");
                    // do something for 'yes'
                },
                "No": function () {
                    // do something for no
                }
        }

【讨论】：

【解决方案3】：

var div = document.createElement('div');
div.innerHTML = "Hello World";
$(div).dialog();

【讨论】：

【解决方案4】：

Juan Ayalas 解决方案应该适用于模态对话框。对于非模态对话框，最好跟踪函数内的 id。我使用以下代码，它并不完美，但应该可以确保 id 是唯一的。该代码几乎等于 Juan Ayalas 示例，但使用计数器来避免重复的 id。（此外，我默认删除了 OK 按钮）。

  (function($) 
  {
    var dCounter=0; //local but "static" var 
    $.extend({
    showPageDialog: function (title, content, buttons, options) {
        /// <summary>Utility to show a dialog on the page. buttons and options are optional.</summary>
        /// <param name="buttons" type="Object">Dialog buttons. Optional, defaults to nothing (single OK button).</param>
        /// <param name="options" type="Object">Additional jQuery dialog options. Optional.</param>
        if (!buttons)
            buttons = {}; //{ "Ok": function () { $(this).dialog("close"); } };
        var defOptions = {
            autoOpen: false,
            width: "auto",  
            modal: false,   
            //show: "blind",
            //hide: "explode",
            title: title,
            buttons: buttons
        };
        if (options)
            defOptions = $.extend(defOptions, options);
        dCounter++;
        //console.log("dCounter is " + dCounter);
        var pdId = "#pageDialog"+dCounter;          
        var pd = $(pdId);
        if (pd.length < 1)
            pd = $("<div/>").attr("id", pdId)        
                            .appendTo("body");
        else
            pd.dialog('destroy');

        pd.html(content)
          .dialog(defOptions)
          .dialog("open");   
    }//end of function showPageDialog
  }//end of extend options
  )//end of extend argument
  }//end of function definition

【讨论】：