常にページ上に要素を持ち、そこからダイアログを作成する必要はなく、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");
});
ここでデモ。
もう1つの解決策は、もう少し動的です。
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');
});