jquery ui - 模态对话框（创建模态内容的更好方法？）答案

【问题标题】：jquery ui - modal dialog (better way to create content of modal?)jquery ui - 模态对话框（创建模态内容的更好方法？）
【发布时间】：2014-11-17 17:01:30
【问题描述】：

有没有办法在 javascript 中定义模态内容，而不是总是必须在页面上有一个元素并从中创建对话框？

它有标题选项，所以我可以“动态”创建一个模态标题，但实际内容呢？就像说我需要它说，“你要删除图像#539”。而不是为每个可能的图像创建一个模态 - 或者甚至从创建元素然后从中创建对话框。

一定有更好的方法。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-dialog jquery-dialog

【解决方案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.

【讨论】：

【解决方案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");

你可以想象在函数中添加更多的参数来控制宽度、高度等。

享受吧！

【讨论】：

【解决方案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

【讨论】：