Ever seen those really neat pages where you click on a link, and instead of an actual pop-up in another window, you get a "pop-up" that sits on top of your existing page. And even better, it's modal and anything not in the "pop-up" becomes darker.
Well, I wanted to implement something like that. My first initial thought was to create a new div, center it, make it transparent (slightly), then lay another div on top of this. The first div would block everything underneath it, while the second div would display what I needed. I saw two immediate problems. The first was that IE 6 doesn't support transparent png files very well (of course... considering IE 6 doesn't support many things very well), and the second was that IE 6 (again!) doesn't honour the z-index on selects. Wow.... how did IE 6 ever get so popular... (M$). Anyways... long story short, it requires a number of hacks to get everything working it seems.
So... instead of tackling the problem myself, I naturally assumed that I wasn't the only one with this problem. Lo and behold, I found a very good implementation for this already that fits hand-in-hand with RoR:
Lightbox Gone Wild!
This wonderfully written code includes only 2 files. A javascript file and a CSS file. It is, however, based on Prototype and Script.aculo.us, which RoR already automatically includes in it's javascript folder. Calling it is even simpler. You create a link to the HTML file you want to have in your "pop-up" and label it with the class as "lbOn". That's it! You get the whole package deal with this simple modification! Don't believe me? Try it!
If you want it to call a controller to have dynamic information displayed (unlike the examples given on the website), instead of the link URL being something like "text.html", just change it to the path of a controller action. What will happen is an AJAX call to that controller action, whereby you can treat it as any other AJAX call, such as when you use link_to_remote or remote_form_for.
Simple as 1-2-3!
W
Well, I wanted to implement something like that. My first initial thought was to create a new div, center it, make it transparent (slightly), then lay another div on top of this. The first div would block everything underneath it, while the second div would display what I needed. I saw two immediate problems. The first was that IE 6 doesn't support transparent png files very well (of course... considering IE 6 doesn't support many things very well), and the second was that IE 6 (again!) doesn't honour the z-index on selects. Wow.... how did IE 6 ever get so popular... (M$). Anyways... long story short, it requires a number of hacks to get everything working it seems.
So... instead of tackling the problem myself, I naturally assumed that I wasn't the only one with this problem. Lo and behold, I found a very good implementation for this already that fits hand-in-hand with RoR:
Lightbox Gone Wild!
This wonderfully written code includes only 2 files. A javascript file and a CSS file. It is, however, based on Prototype and Script.aculo.us, which RoR already automatically includes in it's javascript folder. Calling it is even simpler. You create a link to the HTML file you want to have in your "pop-up" and label it with the class as "lbOn". That's it! You get the whole package deal with this simple modification! Don't believe me? Try it!
If you want it to call a controller to have dynamic information displayed (unlike the examples given on the website), instead of the link URL being something like "text.html", just change it to the path of a controller action. What will happen is an AJAX call to that controller action, whereby you can treat it as any other AJAX call, such as when you use link_to_remote or remote_form_for.
Simple as 1-2-3!
W
No comments:
Post a Comment