jQuery的對話框：該對話框之前顯示的內容是開放的

我有一些HTML代碼的對話裏面，像這樣：jQuery的對話框：該對話框之前顯示的內容是開放的

<center> 
<a href="#add_auto" id="add_auto" onclick="addAuto();" > 
    <img " src="/css/images/add_author_automated.png"; id="add_author_automated"; alt="-"; /> 
</a> 
</center> 
<div id="dialog-modal" title="Basic modal dialog" > 
    <textarea style="width: 95%; heigth: 400px" name="authors-auto-adding"; id="authors-auto-adding"></textarea> 
    <input text-align="center" type="BUTTON" onclick="processAuthorsParagraph();" value="Process"; /> 
</div>

當點擊圖像，我callig功能addAuto：

function addAuto() 
{ 
    $("#dialog-modal").dialog({ 
     height: 300, 
     width: 800, 
     modal: true 
    }); 
}

但問題是，第一次打開頁面時，我在主頁面上顯示了對話框內容。當我打開對話框然後關閉時，主頁上的dilog內容消失。

我已經嘗試在的document.ready使用

$("#dialog:ui-dialog").dialog("destroy");

，但沒有任何變化。

謝謝你的幫助。

來源

2012-07-06 Miloš

只要把style="display: none"中的<div>

標籤當所示的對話框樣式將被刪除。直接進入無包裝的div元素的HTML標記dailog

<div id="dialog-modal" title="Basic modal dialog" style="display:none;" >

來源

2012-07-06 13:24:34 Alnitak

非常感謝你Alnitak，這對我有效。 – 2012-07-06 13:28:11

是的，你是對的。我有同樣的問題。該解決方案是非常簡單：不要打印你的HTML代碼，但在包裝的javascrip它，以及...

var your_dialog_html = $('<div>your html code here, but attention: without new lines! in your editor</div>') 
var your_dialog = $(your_dialog_html).dialog({ 
     /* options here */ 
}); 

$('#trigger').click(function() {  
    your_dialog.dialog('open'); 
    return false; // prevent the default action, e.g., following a link 
});

來源

2012-07-06 13:24:23 Chris

工作，但它不是很好的內容與邏輯的分離 – Alnitak 2012-07-06 13:26:24

我不認爲這是一個好主意在這種情況下。 CSS在那裏服務。將HTML放入Javascript代碼是一件非常糟糕的事情，如果它是HTML很長的話，那就更是如此。 – kapa 2012-07-06 13:27:29

@Alnitak：嗨，對不起Alnitak - 是的，你說得對，你的解決方案更加優雅，謝謝你我也從中學到了東西 - 但是我發現你的評論是「一段不相關的代碼」，「它沒有幫助」不必要的冒犯性和不正確的，因爲我的代碼是相關的，實際上工作... – Chris 2012-07-06 13:48:08

如果添加此行到您的CSS就會創造奇蹟：

#dialog-modal { display: none; }

這會讓你的模態默認隱藏。

來源

2012-07-06 13:24:30 kapa

非常感謝... – 2012-07-06 13:27:48

你可以把顯示器。

避開這個事實，爲了解決您的問題，我會通過CSS將對話框模式設置爲display: none;。然後，您可以在對話框的open回調上使用$.fn.show()或display: block;。這將不顯示內容，直到它出現在對話框中。

來源

2012-07-06 13:28:02 Ricardo

感謝里卡多.... – 2012-07-06 13:29:45

要調用$("#dialog:ui-dialog").dialog("destroy");，但在你的標記沒有#dialog：

來源

2012-07-06 13:29:01

jQuery UI將在第一次打開時自動「顯示」對話框。 – Alnitak 2012-07-06 13:30:09

jQuery的對話框：該對話框之前顯示的內容是開放的

回答

相關問題