有没有办法在 javascript 中定义模态内容,而不是总是必须在页面上有一个元素并从中创建对话框?
它有标题选项,所以我可以“动态”创建一个模态标题,但实际内容呢?就像说我需要它说,“你要删除图像#539”。而不是为每个可能的图像创建一个模式 - 或者甚至从创建元素然后从中制作对话框。
一定有更好的方法。
有没有办法在 javascript 中定义模态内容,而不是总是必须在页面上有一个元素并从中创建对话框?
它有标题选项,所以我可以“动态”创建一个模态标题,但实际内容呢?就像说我需要它说,“你要删除图像#539”。而不是为每个可能的图像创建一个模式 - 或者甚至从创建元素然后从中制作对话框。
一定有更好的方法。
你可以尝试这样的事情:
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");
});
演示在这里。
这是另一种解决方案,更具动态性:
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");
你可以想象在函数中添加更多参数来控制宽度、高度等。
享受!
谢谢斯科特。我为对话框添加了一个标题属性:
...
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');
});