Modal Overlay

Modal-overlay is a tiny rails plugin that allows you to produce good looking screen overlays without effortlessly and unobtrusively for thoes who, like me, fancy using lowpro.

Demo

There is nothing like a little demo so here you go: Let's see it!

Links:

Motivation

I liked the way squarespace.com had some nice overlay windows for creatng posts and I wanted to have similar functionality in my web apps so I decided to write a little plugin. I didn't look around for an existing implementation, which I'm sure there are quite a few good ones. I just wanted to do it myself.

Installation

This plugin has a home on rubyforge.org. To install it just issue the following command from your Rails application directory:

   script/plugin install svn://rubyforge.org/var/svn/modal-overlay/trunk

Usage

The plugin is really easy to use: include the javascript file and use one of the helper methods: link_to_show_overlay and link_to_hide_overlay.


<%= link_to_show_overlay, 'Login', login_path %>

The example above will generate an anchor that will show a nice overlay when clicked on. Should javascript be disabled then it will degrade nicely and get you the login page as would a normal link. There is a similar helper method link_to_hide_overlay, which play the opposite role of hiding any visible overlay "window".


<%= link_to_hide_overlay, 'Cancel', public_path %>

How Does it Work?

All the helper method do is add a class to your link. Lowpro and some javascript handle the rest. If you don't want to use lowpro, you can still use the plugin by pasting a bit of html into your page and enabling the facility in the helper configuration.


   Configuration = {
      :use_onclick => true # Leave false when using lowpro.
   }

Enjoy!