views:

343

answers:

1

Can I use a JQuery Dialog to open up an external web page, and if so - how?

Essentially, I want to replicate the abilities of LightWindow using JQuery (LightWindow is based on scriptalous).

www.stickmanlabs.com/lightwindow/index.html

Ideally, I want to use something that is apart of the JQuery core. If it need to be a JQuery plug-in, that's fine but I would really like to have it be apart of the core functionality of such features already exist.

+3  A: 

In JQueryUI you are using a DIV as a Dialog.

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

So you can use an iframe inside DIV:

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

Edit:

If you want every LINK in your page to be displayed on JQueryUI Dialog here it is:

//JQuery
    $("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
Hmm ... this might now work because I want to have essentially every link on my page open up inside a lightbox/shadowbox. in you're example, it appears I would have to create a dialog bind for every single link.
TeddyB
What about Greybox, it appears to be an officially supported JQuery feature. http://jquery.com/demo/grey/ ???
TeddyB
Yes it also works. You will just need JQuery core plus this plugin instead of having JQueryUI. But this dialog is not draggable nor resizable (at least with Opera)
JCasso