CODEWITHSUNDEEP
javascriptjqueryjquery-ui
TeddyB
TeddyB

Reputation: 545

JQuery: Can I use a Dialog to open up an external web page?

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.

Upvotes: 5

Views: 10345

Answers (2)

KyleMit
KyleMit

Reputation: 29889

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

Upvotes: 0

JCasso
JCasso

Reputation: 5523

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>

Upvotes: 9

Related Questions