jQuery用戶界面 - （？更好的方式來創建模態的內容）模式對話框

Question

有沒有辦法來定義的javascript模態內容，而不是總是不得不在頁面上的元素，並創建了對話？

它有標題的選擇，這樣我就可以「動態」創建模式標題，但對於實際的內容？就像說我需要它說，「你要刪除圖像＃539」。而不是爲每個可能的圖像創建一個模式 - 甚至不是創建元素，然後從中創建對話框。

我們有了一個更好的辦法。

Answer 1

你可以嘗試這樣的事：

HTML

<button id='diag1'>First dialog</button> 
<button id='diag2'>Second dialog</button> 

的Javascript

var diag = $('<div id="myDialog" title="Testing!"><span id="dialogMsg"></span></div>'); 

diag.dialog({ 
    autoOpen: false, 
    modal: true 
}); 

$('#diag1').click(function() { 
    $('#dialogMsg').text("Message for dialog 1."); 
    diag.dialog("open"); 
}); 

$('#diag2').click(function() { 
    $('#dialogMsg').text("Message for dialog 2"); 
    diag.dialog("open"); 
}); 

演示here。

Answer 2

這裏的另一種解決方案，更加動態：

function showError(errorTitle, errorText) { 

    // create a temporary place to store our text 
    var window = $('<div id="errorMessage" title="' + errorTitle + '"><span id="dialogMsg">' + errorText + '</span></div>'); 

    // show the actual error modal 
    window.dialog({ 
     modal: true 
    }); 
} 

然後，當你需要調用錯誤模態簡單地做：

showError("Error-Title", "Error message here"); 

你可以想象，增加更多的參數的功能控制寬度，高度等

享受！

Answer 3

謝謝斯科特。我已經加入了該對話框標題屬性：

...

var diag = $('<div id="myDialog" title=""><div id="dialogMsg"></div></div>'); 

...

$('#diag1').click(function() { 
    $('#dialogMsg').html('<div class="dialog-body">Message for dialog 1</div>'); 
    $("#myDialog").dialog({title: 'Dialog Title 1'}); 
    diag.dialog('open'); 
}); 

Demo