Как создать множество экземпляров UI Dialog?

Question

Есть некий диалог, описанный примерно таким образом:

$("#dialog").dialog({
...
});

Соответственно вызывается он обычным образом $("#dialog").dialog("open");.

Проблема в том, что при нажатии пользователя на ссылочку внутри этого диалога должен открыться другой подобный поверх уже открытого, а в новом диалоге может быть открыт еще один и т.д.

Есть идеи, как подобное реализовать?

Answer 1

Клонируйте #dialog, вызывайте на копии $.dialog из обработчиков, и показывайте вложенные диалоги сколько захочется.

<div id="dialog" style="display: none;">
    This is a dialog base.<br />
    Depth: <span class="depth">unknown</span>
</div>
function createDialog(depth) {
    var dialog = $("#dialog").clone();
    $(".depth", dialog).text(depth);
    dialog.dialog({
        modal: true,
        title: "Level " + depth,
        buttons: {
            "Go deeper": function() {
                createDialog(depth + 1);
            },
            "Close": function () {
                $(this).dialog("close");
            }
        }
    });
}
createDialog(1);

Живой пример: http://jsfiddle.net/drdaeman/DZbw2/

Вам, в вашем случае, придется создать копию #dialog, используя метод clone, иначе, действительно, работать не будет. Для каждого диалога нужны свои, отдельные элементы.