5

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.

2 Answers 2

9

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:

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>
3
  • 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
    Commented Jan 6, 2010 at 19:35
  • What about Greybox, it appears to be an officially supported JQuery feature. jquery.com/demo/grey ???
    – TeddyB
    Commented Jan 6, 2010 at 20:36
  • 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
    Commented Jan 6, 2010 at 20:47
0

Just to expand on JCasso's great answer, you can handle this all in 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
    });
});

Now any links on the page will be opened in inside of an iframe in a dialog box.

Working Demo in jsFiddle

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.