JQuery：我可以使用对话框打开外部网页吗？

Question

我可以使用JQuery Dialog打开外部网页吗？如果可以，怎么做?

实际上，我想要使用JQuery来复制LightWindow的功能（LightWindow是基于scriptalous的）。

www.stickmanlabs.com/lightwindow/index.html

理想情况下，我想使用JQuery核心中的某些东西。如果需要使用JQuery插件，那也没关系，但我真的希望它成为这些功能已经存在的核心功能的一部分。

- TeddyB

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>

编辑：

如果您想让页面中的每个链接都显示在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>

- JCasso

---

嗯...这可能行不通，因为我想让页面上的每个链接都在一个轻盒子/阴影盒子中打开。在你的例子中，似乎我需要为每个单独的链接创建一个对话框绑定。 - TeddyB

灰盒子（Greybox）怎么样，它似乎是 JQuery 的一个官方支持特性。http://jquery.com/demo/grey/ - TeddyB

是的，它也可以工作。您只需要使用此插件加上JQuery核心，而不是使用JQueryUI。但是这个对话框不能被拖动或调整大小（至少在Opera中）。 - JCasso

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

现在页面上的任何链接都将在一个对话框框架内打开。

jsFiddle中的演示

- KyleMit