dresende does not currently provide support for this item.

11 comments found.

Live preview please :D


function step1() { modalbox.show(new Element("div").insert( new Element("p", { "align": "justify" }).insert( "It's so easy to create a modalbox. You just use:<br /\><br /\>" + "
<strong>modalbox.show(content[, options])</strong>

” + “Examples:

” + “
modalbox.show(\"Hello world!\")\n" +
                        "modalbox.show(\"<span>Hello <strong>world</strong></span>\", { width: 500 })
” ) ), { “title” : “Step 1/3”, “width” : 500, “align” : “left”, “options” : [{ “label” : “Next »”, “onClick” : step2 }] }); };

The demo is very pretty. :) Some instructions would be nice. What’s all the plus signs, \n, insert, new element, hide etc etc. Doesn’t seem simple to me, sorry. I have no idea what all the possible event handlers can be. Is this standard scriptaculous stuff that’s assumed i know? I’m not familiar with that. A normal lightbox that i’m used to is a simple rel=”whatever”, some options, Done. Here, you have a lot of parenthesis, square brackets, curly brackets, event handlers, functions, etc.

Your demo is nice but for me, especially without instructions, I don’t get it. Maybe this is powerful for someone more experienced. The result is very nice and smooth for sure.

EDIT : sorry, the above code is from the demo and i dont know how to sort it out to display properly here because of all the brackets, slashes and quotes.

Sorry if the demo is confuse. I can help you out on anything you need with the modalbox.

Is there away to have the box open away from the top of the screen. Perhaps centered?


Is it also possible to, like here when you reply to a comment, you open modalbox, where theres a textbox in the modalbox, and when you press submit the comment get comitted and the modalbox closses?

Yes, absolutely :)

really good and smooth, but it would be better if you make it to appear int he center like “lightbox” it will look even better since that transitioning that you made is really smooth. just my 2 cents. :)

P.S. If you make a contact form using this, it would be awesome, i would buy it right away, meanwhile this is bookmarked for later :)

By default it shows centered. You can make a contact form, just do the code of the form and then do:

modalbox.show(“parent ID of the form”);


Hi, Is there also a way to show a box on start (automatically) ?


Just do:

Event.observe(window, "load", showModalbox);

function showModalbox() {

What is the best approach for me when I want to add a margin at the top of the box, I have my menu at the top of my page.


You have an option in the modalbox options called “parent”. This is the parent DOM element where modalbox will appear (inside).

i’m a noob with this kinda thing. Before I buy this little amazing thing, I was wondering what I could do. Is it possible to get some help from you so I can put two text fields in it, obviously “username” and “password” And a submit button. If I could get a premade login model box then I would buy this without hesitation. Can you do that or give me some sort of resource. Thanks Man. Great Work.

needs more documentation, had to change my main div classes to match those in the test page to get it to work (was not listed on the document) and theres no option for a centered (lightbox)

Can the bottom buttons be inactive and then activated on events? If so I’m sold because I’m looking for a solution where I can run some code in this type of popup.

There are activate/deactivate methods that allow you to lock/unlock the buttons. You can use the option onShow of the constructor to deactivate all the buttons and just activate them later

I would love an active demo. The two links you provide above are both bad.