jquery ui - модальное диалоговое окно (лучший способ создать контент модального?)

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");
});

Демо здесь .

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');
});

Демо