Javascript - Drag and Drop Dialog Box


Javascript provides 3 user dialog boxes for user interaction.

1. alert();

2. confirm();

3. prompt();

But... there are times when you need control over the style of the box. Sometimes you need [Yes] [No] buttons instead of [OK] [Cancel], in fact there are many times and places where it would be useful to have more control over what the user sees. Ideally you could style it with HTML and CSS just as you would anything else.

So I wrote a script that provides this functionality.

Requirements:

1. No outside images for basic call (lightweight/portability).

2. All code contained in 1 javascript source file (lightweight/portability).

3. Dialog window css must use html style tag so no outside css file is required (lightweight/portability).

4. Drag and Drop must work in all major browsers (safari, IE, firefox, etc).

5. Look and Feel must be the same in all major browsers (safari, IE, firefox, etc).

6. Can be styled with outside images.





Demo

Here is a demo of the dialog in action.



Usage:

The alert function can be customized in many ways. The main function provided in the source is ZWDialog.Alert. It draws up a basic UI dialog box.
ZWDialog.Alert("The user has clicked this button");//body
ZWDialog.Alert("The user has clicked this button", "Warning!");//body and title
ZWDialog.Alert("The user has clicked this button", "Warning!", 400);//w=400
ZWDialog.Alert("The user has clicked this button", "Warning!", 400, 200);//w=400 h=200
ZWDialog.Alert("The user has clicked this button", "Warning!", 400, 200, 50);//w=400 h=200 t=50
ZWDialog.Alert("The user has clicked this button", "Warning!", 400, 200, 50, 75);//w,h,t,l
ZWDialog.Alert2("The user has clicked this button");//styled


If you wish to modify the style of the Dialog Box, copy the ZWDialog.Alert function code and modify it.
Download zd_dialog.zip (6.4KB)


This drag and drop script was inspired by from Tim Taylor's Drag and Drop Sortable Lists (http://tool-man.org/examples/sorting.html), which was based on based on Youngpup's DOM-Drag (http://www.youngpup.net/2001/domdrag) and on Simon Cozen's Javascript drag-and-drop ordered lists (http://blog.simon-cozens.org/6785.html).

code snippets are licensed under Creative Commons CC-By-SA 3.0 (unless otherwise specified)

degr on 2014-01-06 08:38:23
Thanks for dragNDrop code.