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.
12 comments:
Hi what if the dialog is being brought up from a button in a frame? The iframe will stay behind and inside that frame. How could we we bring it up front like normal windows dialog? thanks
If the javascript is in the iframe, it can call functions in the calling page using 'parent',
i.e.
parent.myfunc();
hi
what if I want to get iframe contain html source from other file?
thanks
Hi Willy-
Have you tried setting the src attribute to a local file URI like file:///c:/mytestfile.html?
Any ideas why an iFrame source from the same environment would break out of the modal box while an external source does not? I'm trying to use an iFrame to show flash content because it's using SWFAddress to navigate to the appropriate page. When I reference this content that lives in my own development environment it behaves differently than when I directly reference a coworker's development environment.
The URL within my own environment breaks free of the modal dialog and takes the entire browser window.
How do you close the dialog from inside the Iframe?
to close the dialog from the iframe, $(parent.document).find('.ui-dialog');
window.parent.$('#dialogIDname').dialog('close');
Great example, very helpful got my code up and running quickly.
Any idea on how to use this as properties window dialog?
Falak
It works like a charm! I tried the second method.
It works. Thank you!
I'd like to open more than one dialog window on a page but it is not working for me. What I did was repeat the script but in each instance change the name of the #divId and #modalIframeId to #divId_a and #modalIframeId_a, #divId_b and #modalIframeId_b, etc. It seems like it should work but it just shows the results of the last javascript (dialog window) on the page.
Obviously I know very little (nothing) about javascript!
I have the answer for my previous post on the stack overflow website. I was not able to correctly name each function. If you are having the same trouble I was, you can find the answer here...
http://stackoverflow.com/questions/27001704/conflicting-jquery-dialog-scripts/27002152#27002152
Post a Comment