eSpace Blog RSS
22Mar

Prototype Window Class and LightBox

0

While developing a RoR web portal, one task requirement was to show a modal pop-up window over the web-page. While searching for a javascript solution for doing that, I found two great solutions, and they are worth talking about.

The first one is the Prototype Window Class. This javascript class allows you to add a window in the HTML page; you can add more than one window to the same page and control them.

Features

  • Valid HTML/XHTML generated code
  • Resizable windows
  • Minimize/Maximize
  • Modal dialogs
  • Visual effects
  • Skinnable

To use it, follow the following steps:

  1. Download both prototype and window JS files, from Prototype site and Prototype Window Class site, together with the theme CSS file.
  2. Include the two JS files, prototype and window, in your web-page where you need to show the pop-up:

 


	<script src="/javascripts/window.js" type="text/javascript"></script>

      
      3. Add CSS link to use the default theme:


<link href="/stylesheets/themes/default.css" rel="stylesheet" type="text/css" />

      4. For creating a new window, create Window class instance (with optional parameters):

win = new Window({title: "Sample", width:200, height:150});

          and then change its inner HTML to your required window HTML:

           win.getContent().update("Hello world !!");

finally, call showCenter() to fire the pop-up window in to show in the page center:

		win.showCenter();

You can play with sample examples in this site.

The other solution is using the LightBox, a javascript library you can use to create a modal window inside your web-page. The pop-up window will block the web-page and you need to close it to access the main web-page (as modal w works). LightBox depends on Prototype library, so you need to have it also in your project.

To use this solution, follow the following steps:

  1. Download the LightBox library from its site
  2. Include the two JS files, prototype and lightbox, in your web-page:

	<script src="/javascripts/lightbox.js" type="text/javascript"></script>

       3. Add CSS link to use the default theme:


<link href="/stylesheets/lightbox.css" rel="stylesheet" type="text/css" />

 

      4. Now, for creating a pop-up modal window, show a div content in its inner HTML:

		new Lightbox.base('div_id');

      It will get the div with the given id, hide all opened lightboxes (if any), and show the given div content into a new modal window.

 

For more how-to for the lightbox, check this nice tutorial.

 

Written by:

Wael Shaban (wshaban.blogspot.com)

 

Post a Comment

eSpace podcast Prodcast

RSS iTunes

Archive

Latest Comments