JQuery Boxy Plugin with Iframe Content 
Today I was struggling with a lightbox-alike feature for a customer's intranet-website. I chose the boxy-plugin for JQuery, because JQuery itself was already used on that particular site, so I kept the library-overhead at a minimum.
The problem was, that a "boxed overlay" ("boxy") consists only of a basic <DIV>. There were no scrollbars inside the boxy and the overlay didn't work as expected in IE6, as it was not able to hide <SELECT> elements under it (in newer browsers it worked fine, though).
I decided to embed an <iframe> into the boxy's content as a solution to both problems mentioned above. This works like this:
[...]
<script type=
"text/javascript">
function showboxy(myactuator) {
mycontent='<iframe border=0 src=
"mycontentfortheiframe.php">You need a Browser which can display iframes</iframe>';
new Boxy( mycontent, { unloadOnHide:
true, draggable:
false, show:
true, modal:
true, title:
"Replaceme!", closeText:
"[ Close ]", actuator: $('#'+myactuator)[0]} );
}
</script>
[...]
<a id=
"boxyfoo" title=
"tutorial" onclick=
"showboxy('boxyfoo');" href=
"#" style=
"visibility:hidden; text-decoration: none;">
<button type=
"button" >Click here to boxy!</button>
[...]
The tricky part is to access the boxy's properties from _within_ the iframe. You need to access the DOM element the boxy is linked to on the main page, not on the iframe:
window.parent.Boxy.linkedTo( window.parent.$('#boxyfoo')[0]).setTitle('I am replaced');
(This example replaces the boxy window's title from within the iframe).
Blog des Wahnsinns
Hinweise zur Formatierung
