JavaScript Amazing Draggable PopWin

 Home Featuring: Ability to popup a window and drag it anywhere
Credit: CodeLifter

What distinguishes this popup window creator is that its code is relatively simple as well as its controls. Also it has NOT been generalized to create many popup windows on the same page so it is a useful programming exercise to all those interested in extending this bit of JavaScript.

There are two components to this CSS/DIV based popup window. The JavaScript shows some nice, simplified browser detection and nifty DOM based detection. We have taken the script out of the web page and made it into a callable JavaScript file for the usual ease of coding reuse and faster runtime performance if more than one web page will use the window.

The next part is the DIV or floating layer code and it can go any place convenient between the <body> tags because in most cases it will be invisible on start up. However it is very obtrusive in most previewing IDEs like Dreamweaver and GoLive where it obscures underlying HTML. So users will have to get used - but this is true of many of the DIV/CSS based components that we have been featuring. On the brightside, the contents of the popup window can be any HTML as we demonstrate in our demo window.

Click to HIDE the Popup Window.
Click to SHOW the Popup Window.
 
Top of Page  Tutorials Home  JavaScript References  JavaScript Books
Amazing Popup Window - Drag me! X

This is where your content goes.
You can change the width and color.
It expands downward to accomodate its content
It can contain any html code or text .
Here are some examples:

Click HERE to HIDE the Popup Window.
Another example of hidden content that can be made visible instantly with a mouse click - and the user can place it anywhere on screen:

Do you like it ?