JQuery: Могу ли я использовать диалог, чтобы открыть внешнюю веб-страницу?

Question

Могу ли я использовать JQuery Dialog , чтобы открыть внешнюю веб-страницу, и если да, то как?

По сути, я хочу воспроизвести способности LightWindow с помощью JQuery (LightWindow основан на сценариях).

www.stickmanlabs.com / lightwindow / index.html

В идеале я хочу использовать что-то, что не входит в ядро ​​JQuery. Если это должен быть плагин JQuery, это нормально, но мне бы очень хотелось, чтобы он был отдельно от основной функциональности таких функций, которые уже существуют.

Answer 1

В JQueryUI вы используете DIV в качестве диалога.

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

Таким образом, вы можете использовать iframe внутри DIV:

<div id="dialog" title="Google">
    <IFRAME style="border: 0px;" SRC="http://www.google.com" width="100%" height = "100%" >
</div>

Изменить:

Если вы хотите, чтобы каждая ССЫЛКА на вашей странице отображалась в диалоге JQueryUI, вот она:

JavaScript :

$("a").click(function(event){
  event.preventDefault();
  $("#frame").attr("src", $(this).attr("href"));
  $('#dialog').dialog('open');
});

HTML :

<div id="dialog" title="Dialog Title">
    <IFRAME id="frame" style="border: 0px;" SRC="" width="100%" height = "100%" >
</div>

Answer 2

Просто подробно остановимся на Отличный ответ JCasso , вы можете справиться со всем этим в JavaScript:

$("a").click(function (event) {
    event.preventDefault();
    var page = $(this).attr("href");
    var title = $(this).text();
    $('<div></div>')
        .html('<iframe style="border: 0px; " src="' + page +
              '" width="100%" height="100%"></iframe>')
        .dialog({
            autoOpen: true,
            modal: true,
            height: 800,
            width: 400,
            title: title
    });
});

Теперь все ссылки на странице будут открываться внутри iframe в dialog поле.

Рабочая демонстрация в jsFiddle