Monday, March 27th, 2006

Javascript Windows Enhanced

Several sites make use of simple floating divs to make “windows” on a page, but what if you want something with a bit more refinement to it? With the help of Prototype and the Javascript libraries, this post will show you how to make those popup “windows” sing.

This javascript class allows you to add window in an HTML page

This class is based on Prototype 1.4. The code is inspired of the powerful library. You can even use all effects to show and hide windows if you include effects.js file.

It has been tested on Safari, Camino, Firefox and IE6.

The script comes in a neat, simple download that makes it easy to use and easy to change the look of to match your site. Of course, examples are included (be sure not to miss those) and some limited documentation is included as well. He also mentions a specific use for it on his sites – to act as a debugger window for his Javascripts without messing up his layout or dealing with the hassle of alerts.

Posted by Chris Cornutt at 6:22 pm

3.8 rating from 118 votes


Comments feed TrackBack URI

Good, i was making some script like this to me using scripts from Now i have some base to rewrite somethings in my script.

Comment by Edir — March 27, 2006

I did a windows script with scriptaculous a few months back.
It supports max/minimize, too, and has callbacks for saving window properties with Ajax.
Problem with both versions: Drag and drop is painfully slow in FireFox.
I don’t know if this is a problem with FF or with the scriptaculous DnD implementation

Comment by Martin — March 28, 2006

i like the window library from zapatec much more but thx4info

Comment by mnc — March 28, 2006

Interesting Finds

Trackback by Jason Haley — March 28, 2006

uh, not feelin it. this seems exactly like those windows made with good old “DHTML” a while ago. using scriptaculous and other tools to make them might make room for some whizz-bang, but the usability, size, and purpose gaps are still there.

Comment by tom — March 28, 2006

Check out for an alternative windows implementation as part of a comprehensive JS library.

Comment by Hugh Gibson — March 29, 2006

How do I refer back to the parent page if I have passed a url to the window?

Comment by Deco — March 29, 2006

I was trying something of this kind on my personal homepage, with less results (but also less work, I guess!). Maybe I’m “ajaxed” too… and I didn’t know it.

Comment by Daniele — March 30, 2006

�바스�립트로 만든 윈�우(�업)

do translation into Korean.. :) 몇몇 사ì?´íŠ¸ 들ì?€ 으로 íŒ?ì—…ì?„ 쓰는 대신ì—? 페ì?´ì§€ ì•Šì—?ì„œ div 를 ì?´ìš©í•˜ì—¬ 페ì?´ì§€ 안ì—?ì„œ “windows’를 만들어 사용한다. 하지만, 좀ë?” 세련ë?œ 형태를 ì›?한다ë…

Trackback by 커피와 í??린여름날 — March 30, 2006


Comment by thismsg — March 31, 2006

exactly what i needed.
futuristic look and feel, easy to use.
the script looks like it uses the tag to insert the window.
oddly enough, i dont have a body tag in non of my pages….
is this configrable? if not maybe the author should change the script so that when creating the window i can send the element i want to insert the window after… (not by ID though due to my use of a library that generates on the fly IDs…)
i gave this 5 stars as it is perfect for my current needs.

Comment by guy — April 1, 2006

How to use these windows as getID ();
I do not be getting
I want to open her with the values of an ID

Comment by Marcello Rodrigues Gonçalves — April 3, 2006

El futuro es AJAX………¡¡¡¡¡¡¡¡¡¡¡

Comment by cotton head — October 8, 2006

Thanks! Awesome post!

Comment by Computer Geeks — April 13, 2007

I am trying this script library in one of my projects. Is there available addon to this library that will enable me to minimize the window in a specific location in webpage. Like some sort of status bar.

Comment by randz — May 2, 2007

I dont speak English very well,
but I like read sometimes blogs in other languages,
I dont understand all,
but I must say I enjoy Your post :)


Comment by web — August 4, 2007

Leave a comment

You must be logged in to post a comment.