jQuery用户界面：如何打开一个对话框

Question

我仅仅指刚检查了打开一个对话框的jQuery UI的样品，这是奇怪的是，需要用HTML编写，并通过jQuery选择阅读的消息：

http://jqueryui.com/demos/dialog/

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



<div class="demo"> 

<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> 

我想要做的是很简单的，我想在对话框中显示定义为一个js变量的字符串，像这样：

var cmd_str = "abcdefg"; 
$(cmd_str).dialog(); 

但是，这似乎并没有很好地工作。

Answer 1

它不能只是任何字符串，它需要是html。

var cmd_str = "<div>abcdefg</div>"; 
$(cmd_str).dialog(); 

或莫比清洁器版本：

var cmd_str = "abcdefg"; 
$(cmd_str).wrap("<div></div>").dialog(); 

进一步说明：

$("abcdefg")将匹配一个<abcdefg />元件作为$("a")将匹配一个<a />元件。

摧毁：

最简单的是保存在这样的变量用于对话框的jQuery对象。

var cmd_str = "abcdefg"; 
var $message = $(cmd_str).wrap("<div></div>").dialog(); 

function destroyMessage(){ 
    $message.dialog("destroy"); 
} 

Answer 2

，当你调用$(cmd_str) jQuery的搜索名为abcdefg标签......你应该把整个标记内$()，然后将其注入到DOM，然后调用.dialog()。 就像那样，我想。

$("<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>").appendTo("body").dialog(); 

Answer 3

你必须有一个div或者一些其他的元素，隐藏它，然后根据对话.show和.hide功能，对话框将使其可见。使用.text或.val（取决于消息元素）函数来设置消息。

<div id="dialogMsg" style="hidden"></div> 
$("#dialogMsg").text("Your message").dialog().show(); 
// ... or it can be closed if settings are set when doing .dialog(...) 
$("#dialogMsg").hide();