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.
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>
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.
