The jQuery UI dialog is easy to get started with but has a few areas that causes new users some trouble. One of the most commonly asked questions on the jquery-ui list is “how to load iframe (other webpage) in dialog?” In this article I’ll explain how to load Dynamically URL with an IFRAME in Query UI Dialog.
Demo
First, we create link to page which we want to open into dialog.
<a id="pop" href="http://www.ashishblog.com" title="Ashish Blog" >AshishBlog</a>
Now, we create dialog on link’s click event and get link href and title to diaplay in dialog.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery UI Dialog Demo - Ashish's Blog</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js"></script>
<link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/smoothness/jquery-ui.css">
<script type="text/javascript">
$(document).ready(function () {
$('a#pop').live('click', function (e) {
e.preventDefault();
var page = $(this).attr("href")
var pagetitle = $(this).attr("title")
var $dialog = $('<div></div>')
.html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: 625,
width: 500,
title: pagetitle
});
$dialog.dialog('open');
});
});
</script>
</head>
<body>
<a id="pop" href="http://www.ashishblog.com" title="Ashish Blog">AshishBlog</a>
</body>
</html>
Thanks.
thanks for that
straight up jedi. Is there a way to include buttons with functionality within the dialog.. seems to kick a function not found error.
Thanks a lot for this post.
I was doing something like this, the issue I am getting is (and I also found on your demo page) is:
If any link is clicked in the pop-up page, it opens the resulting page within pop-up itself. What I am looking for is to have the links in the pop-up page (i.e. in iFrame dialog) to open in the main window? any idea?
sorry, my bad
somehow I was thinking target=_parent won’t work , then it suddenly clicked me that iframe is added to the main page’s body, so it should work! and it did
question , how do i get it to load into a div automatically , instead of using an click or href?
basicly i want to stick 3 divs on the screen , and when the page comes up , the urls have automatically been loaded
Hi, I was trying to use the tutorial and code as you have provided. It does not function correctly on my localhost run.
1. Should the url being loaded belong to the same domain? (I am trying to load google.com, does not work)
2. I tried running it on W3 Schools Tryit Editor and it does not load your blog correctly. (http://www.w3schools.com/js/tryit.asp?filename=tryjs_write) Any reasons?
here is link online demo
Great! It works, it’s simple (there are plenty of more complicated examples out there). Thank you for posting.
This great. However seems it does not allow to load sites other than the domain parent page is originated. (cross domain)
[…] to open the links from an RSS feed into a dialog. I am trying the following code which I got from here. The link does not open dialog. Any suggestions what I ‘m doing wrong. […]
thank you for this grate example, but there are something missing; where is the callback delegate function,
by the way , an error returns from the script after the fnuction raised ” Invalid calling object”
Thanks a lot for this post.
Thanks for that post.
Please show a preloader gif image in dialog window before load iframe source page.
Dialog is not opening with dynamic url in salesforce.
My page==>
///////////
$(document).ready(function () {
$(‘a#pop’).live(‘click’, function (e) {
alert(e);
e.preventDefault();
var page = $(this).attr(“href”)
var pagetitle = $(this).attr(“title”)
var $dialog = $(”)
.html(”)
.dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: false,
height: 625,
width: 550,
title: pagetitle
});
$dialog.dialog(‘open’);
});
});
AshishBlog
Dialog is not opening with dynamic url in salesforce.
My page==>
/////////// –
$(document).ready(function () {
$(‘a#pop’).live(‘click’, function (e) {
alert(e);
e.preventDefault();
var page = $(this).attr(“href”)
var pagetitle = $(this).attr(“title”)
var $dialog = $(”)
.html(”)
.dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: false,
height: 625,
width: 550,
title: pagetitle
});
$dialog.dialog(‘open’);
});
});
AshishBlog
thank you!