Today I went looking for a jQuery Modal Plugin that would allow me to display resizeable iframe content.
Although there are many jQuery Modal Plugins out there, there are not many that support iframe content. Out of those that openly support the iframe, I personally didn’t think they look all that good and I didn’t see any that supported the resize feature.
So, then I decided to take a deeper dive into the the jQuery UI Dialog Plugin to see what could be possible. Upon further scrutiny, I found that as of June 25, 2008 @rworth added functionality to the the plugin to support autoResize.
All I really had to do was create an iframe, call the jQuery UI Dialog, turn on the autoResize, do some initial resizing, and presto chango… a resizable modal with iframe content was born!
<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>
Feel free to check out the online demo of the above code and/or download the files yourself if you want.
No comments:
Post a Comment