iFrame in jQuery UI Dialog
Make the Footer Stick to the Bottom of a Page
November 9, 2010Hexadecimal codes of Colors
December 2, 2010
To display iFrame in jQuery UI Dialog, use the following code.
<html>
<head>
<link rel="stylesheet" href="./styles/smoothness/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" />
<script type="text/javascript" src="./scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./scripts/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$('a').click(function(e) {
e.preventDefault();
var $this = $(this);
var horizontalPadding = 30;
var verticalPadding = 30;
$('<iframe id="externalSite" class="externalSite" src="' + this.href + '" />').dialog({
title: ($this.attr('title')) ? $this.attr('title') : 'External Site',
autoOpen: true,
width: 800,
height: 500,
modal: true,
resizable: true,
autoResize: true,
overlay: {
opacity: 0.5,
background: "black"
}
}).width(800 - horizontalPadding).height(500 - verticalPadding);
});
});
</script>
</head>
<body>
<ul>
<li><a href="http://www.google.com" title="Google Dialog">Google</a></li>
<li><a href="http://jquery.com" title="jQuery Dialog">jQuery</a></li>
<li><a href="http://jqueryui.com" title="jQuery UI Dialog">jQuery UI</a></li>
</ul>
</body>
</html>
Check out the online demo of the above code and/or download the files yourself if you want.
Source: http://elijahmanor.com/webdevdotnet/post/jQuery-UI-Dialog-w-Resizable-iFrame.aspx
2 Comments
fyi, your page online demo and “download the files” links don’t work
thanks for sharing the code though
Copied you code and ran and checked the result, found your code not working fine in IE9.