2010-10-21 151 views
2

我僅僅指剛檢查了打開一個對話框的jQuery UI的樣品,這是奇怪的是,需要用HTML編寫,並通過jQuery選擇閱讀的消息: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(); 

但是,這似乎並沒有很好地工作。

回答

2

它不能只是任何字符串,它需要是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"); 
} 
+0

這很棒,它的工作原理! – 2010-10-21 08:12:31

+0

增加了一些解釋。 – 2010-10-21 08:22:43

+0

你知道如何銷燬這個對話框嗎? – 2010-10-21 08:25:25

1

,當你調用$(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(); 
+0

這看起來很醜,有沒有更好的辦法。要顯示一個對話框,我必須把它放進身體?這看起來很奇怪。 – 2010-10-21 08:09:27

+0

,如果我把它放到正文中,文本將顯示給用戶,這是不需要的行爲。 – 2010-10-21 08:10:22

+0

@Bin Chen我用JavaScript重寫了你的例子。我從來沒有嘗試過紅色X解決方案,所以我想我今天學到了一些新東西:) – Minkiele 2010-10-21 08:34:59

1

你必須有一個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(); 
+0

$(「#dialogMsg」)。hide();不起作用。它將有一個標題欄仍在那裏,請測試它。 – 2010-10-21 08:23:59