Lightbox Alternative with Prototype Window
I've been using my Lightbox using iFrames hack with some of my current projects, but I was having an issue with flash randomly not rendering with Lightbox in Firefox. So when I searched for an alternative I came across the Prototype Window Class.
The Prototype Window Class works on Safari, Camino, Firefox and IE6. It also features skinnable windows and integration with the script.aculo.us library for effects.
Example
HTML:
-
<script type="text/javascript" src="/javascripts/prototype.js"> </script>
-
<script type="text/javascript" src="/javascripts/window.js"> </script>
-
<link href="/stylesheets/themes/default.css" rel="stylesheet" type="text/css"></link>
-
<!-- Add this to have a specific theme-->
-
<link href="themes/mac_os_x.css" rel="stylesheet" type="text/css"></link>
JAVASCRIPT:
-
win = new Window('window_id', {className: "mac_os_x", title: "Sample", width:200, height:150});
-
win.getContent().innerHTML = "<h1>Hello world !!</h1>";
-
win.setDestroyOnClose();
-
win.showCenter();
Screenshot
So far I've had no problems with this class and I have found it easier to work with than Lightbox.
Check it out here
My name is Noah Everett. I live in Tulsa, OK. I started 
Hey,
whats about the flash problem under the Prototype Window :-/
did you ever open a window with a url inside and on the main page is a flash??
flas is alwaya the top layer!
solution for this is the "wmode=" option...
yeah.. set wmode="transparent" in your flash variables. alternatively, you can also use z-index in CSS
I have tried both solutions (setting z-index and wmode), but neither is working. If you have it working, can you please be more specific on how to fix the problem with flash trying to stay on top?
Hey,
you'll have to excuse my ignorance here, but how do I actually LINK to that prototype window?
a href="URL" id="id_name" ?
The one i'm using is called "greybox" and it basically lets me put a "rel" tag in any a href and it will display the overlay - the disadvantage is that its ugly the way it loads, its non movable etc... i can't really figure out how to implement this one...
Bitcloud:
Use this JavaScript to call the Prototype Window
Hi there,
I've been having problems using the prototype login window. I'm trying to create a login for a website that I'm working on and for that I decided to use the open login window in prototype.
My question is: I just don't know how to mix the code for the login window with the servlet that will take care of the validation. I've tried everything with no luck. If the login failed, how to redirect the user to the same login window with the error message "login failed".
Any help will be appreciated...
Thanks,
I was having the same problem. When using the prototype window, the flash would appear on top. Changed wmode to 'transparent' and set z-index: 0 (in CSS). Everything works fine now !
Check out the site for example: http://www.theperfectshaadi.com
Do a seach in the directory and open any listings website. It opens in prototype window.
Raja, that's not a complete solution... the outer frame of the pop-up window is still obscured by the Flash. The iframe internal to the box seems to lay on top though.
I'm running Firefox 2.0.0.12.
I've set the wmode to 'opaque'. This seems to be a more stable option compared to 'transparent'
Try now: http://www.theperfectshaadi.com
In reference to wmode: 'opaque' --> http://www.communitymx.com/content/article.cfm?cid=e5141
Solution:
Use wmode 2 times.