Как загрузить страницу с помощью диалогового окна JQuery UI

Question

возможно ли загрузить другую страницу с помощью диалогового окна jquery ui?

Like Dialog + Ajax

Спасибо

Answer 1

Если вы хотите загрузить контент в диалог с помощью Ajax, вы можете легко использовать $ .load:

// initialize dialog
var dialog1 = $("#dialog").dialog({ autoOpen: false,
  height: 600,
  width: 350
});

// load content and open dialog
dialog1.load('path/to/otherPage').dialog('open');

Проверьте пример здесь .

Answer 2

Дизайн диалогового окна JQuery UI таков, что для работы ему необходим существующий контент. Обычно в примерах это DIV, взятый из существующего BODY DOM.

Существуют случаи, когда добавление разметки к существующим страницам просто для создания диалога, особенно если содержимое загружается AJAX, вызывает проблемы. Например, у вас может быть библиотека JavaScript, которую можно вызывать с нескольких страниц, и вы не хотите добавлять разметку к каждой из них.

Альтернативный способ ( вдохновленный этим ) находится здесь:

Разница в том, что вы создаете DIV программно (будет автоматически добавлен в DOM) - а когда диалоговое окно закрывается, мы полностью его уничтожаем - и удаляем из DOM при событии 'close'.

function JQDialog(title, contentUrl, params) {
  var dialog1 = $("<div>").dialog(
  {
     autoOpen: false,
     modal: true,
     title: title,
     close: function (e, ui) { $(this).remove(); },
     buttons: { "Ok": function () { $(this).dialog("close"); } }
  });
  dialog1.load(contentUrl).dialog('open');
}

---

Замените dialog1.load(contentUrl).dialog('open'); на следующее, если вы не хотите, чтобы диалоговое окно открывалось (и потенциально могло мерцать), пока содержимое не загружено. Это также позволит правильно центрировать его без дополнительной работы.

dialog1.load(contentUrl, function () {
    $(this).dialog('open');
});

Answer 3

Я предпочитаю подождать, пока у меня будет содержимое для создания диалога. Это кажется более простым для меня. Кроме того, автоматическое изменение размера не работает иначе:

    $.ajax({
        'url': contentUrl,
        'success': function success(data, textStatus, xhr) {
            $("<div>" + data + "</div>").dialog({
                "width": "auto",
                "height": "auto",
                "close": function (e, ui) { $(this).remove(); }
            });
        }
    });

Answer 4

Конечно, просто включите iframe в HTML вашего диалога.

Answer 5

Если вам конкретно нужен или нужен iFrame вместо введенного контента в dom, у меня есть расширение для этого здесь: http://plugins.jquery.com/project/jquery-framedialog