Topic: edit: Using Redbox

I'm wondering how to do an effect that I see done at  You have to sign up but then when you go to add an account it seems like a div is loaded and comes to the foreground while the opacity of everything else fades and is unclickable.
Does anyone know how to accomplish this?

EDIT: Thanks to Duplex for the pointers below. I've decided to try Redbox.

Last edited by eight (2007-10-27 13:02:03)

Re: edit: Using Redbox

it'S commonly called a "lightbox" as that was the name of the first JS library to do this. Today there are i guess a dozen different ways and libraries do achieve this. Google for:
- lightbox
- greybox
- thickbox
- "prototype windows"
or e.g.

have fun reading smile

Re: edit: Using Redbox

So, now I'm trying to use Redbox but I'm not even to the AJAX part yet.  I've only got the code below and the loaded div shows up above the link and kicks everything down.  It's not just fading in without moving anything the way I would expect it to.

<%= link_to_redbox 'redtest', 'redbox' %>

<div id="redbox" style="display: none">
    <div style="width: 400px">
        <p>This is an inline redbox</p>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam feugiat. Maecenas euismod congue quam. Maecenas nec dui. Phasellus ipsum ipsum, lobortis ac, eleifend eu, posuere accumsan, ipsum. Morbi massa. Mauris mattis sollicitudin odio. Donec ut ligula. Vivamus quis sapien. Vivamus orci. Curabitur consectetuer, purus in rhoncus iaculis, diam enim commodo magna, sed auctor magna mauris nec odio. Aliquam tempus. Duis at sem. In massa.</p>
        <a href="#" onclick="RedBox.close(); return false;">Close</a>


Last edited by eight (2007-10-27 13:07:52)

Re: edit: Using Redbox

Is there some CSS you need to include in your layout?

Toby Hede
FiniteStateMachine - Software Development for Social Networks

Re: edit: Using Redbox

The guy who made Redbox has a demo here and I've looked at his css but can't find anything that seems special.

Re: edit: Using Redbox

Ok, I fixed it.  In all the examples I've seen they have <%= stylesheet_link_tag 'redbox' %> in the head tags and I just thought that that's what they were calling their stylesheet for the example.  But... I'm not so bright and the plugin actually makes a 'redbox' stylesheet in the /public/stylesheets/ folder.

I'll start working on the AJAX version now.