Working Demo in jsFiddle

Question

我可以使用JQuery Dialog打开外部网页，如果是的话 - 怎么做？

基本上，我想使用JQuery复制LightWindow的功能（LightWindow基于脚本）。

www.stickmanlabs.com/lightwindow/index.html

理想情况下，我想使用JQuery核心的一部分。如果它需要是一个JQuery插件，那很好，但我真的希望它已经存在这些功能的核心功能。

Answer 1

在JQueryUI中，您使用DIV作为对话框。

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

所以你可以在DIV中使用 iframe ：

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

修改

如果您希望页面中的每个 LINK在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's great answer，您就可以在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内打开。

JQuery：我可以使用Dialog打开外部网页吗？

2 个答案:

Working Demo in jsFiddle