Upon unpacking the download archive, you'll get a folder structure. I put my sample html files along side the html files in \development-bundle\demos\dialog, so if you're following along, that's where you should put the samples below.
In this first sample, the IFRAME is placed inside a DIV. In the second sample, the IFRAME is dynamically generated into the DIV--so it doesn't have to appear in the DIV content intially. In either case, there is some boilerplate css and jquery files that are loaded (they are pretty small in size compared to some other javascript libraries fortunately). Both samples also show the $(document).ready() function used to specify settings for the dialog. Then a links onclick method invokes the showDialog method. When the IFRAME is statically part of the div tag, it's src attribute is simply set in shoeDialog using JQuery's attr method.
<!DOCTYPE html><html><head>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
<script type="text/javascript">
function showDialog(){
$("#divId").dialog("open");
$("#modalIframeId").attr("src","http://www.google.com");
return false;
}
$(document).ready(function() {
$("#divId").dialog({
autoOpen: false,
modal: true,
height: 500,
width: 500
});
});
</script>
</head>
<body >
<a href="" onclick="return showDialog()">Show the Dialog</a>
<div id="divId" title="Dialog Title">
<iframe id="modalIframeId" width="100%" height="100%"
marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto"
title="Dialog Title">Your browser does not suppr</iframe>
</div>
</body>
</html>
For the second sample, just a few lines are different--removing the IFRAME from the DIV, and instead creating it in the showDialog method.
<!DOCTYPE html><html><head>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
<script type="text/javascript">
function showDialog(){
$("#divId").html('<iframe id="modalIframeId" width="100%" height="100%"
marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" />').dialog("open");
$("#modalIframeId").attr("src","http://www.google.com");
return false;
}
$(document).ready(function() {
$("#divId").dialog({
autoOpen: false,
modal: true,
height: 500,
width: 500
});
});
</script>
</head>
<body >
<a href="" onclick="return showDialog()">Show the Dialog</a>
<div id="divId" title="Dialog Title" />
</body>
</html>
In either case, you can specify attributes on the IFRAME to control standard IFRAME features, and you can also use different options for the ui.dialog, described here (the JQuery documentation is quite good). Currently, the samples only use scrolling when required.