here is code how to do that:
<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() {
$(' .diag').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" class ='diag' title="Google Dialog">Google</a></li>
</ul>
</body>
</html>
more...
No comments:
Post a Comment