Dialogs.JS Setup, Installation and Help Topics
Say goodbye to the boring default browser dialog boxes you are using on your website or online applications, here is Dialogs.JS!
The component comes with custom alert, confirm and prompt boxes, a couple of handy JavaScript methods that emulate the behavior of the "real" browser dialogs, really small footprint and 12 skins that will fit virtually any design. You get lightbox-style modal overlay, cool buttons, keyboard navigation (Enter and ESC keys), rounded corners input for the prompt... Everything so Web 2.0!
View online demo of Dialogs.JS or download it straight away. Buy via PayPal.
Because the component or parts of it are rendered entirely on the client, and the source is not available via the standard View Source command of the browser, it is recommended that you use IE DevToolBar or FireBug or other troubleshooting and code inspection tool (such as Opera Dragonfly or the development tools of Safari and Google Chrome) in order to inspect the HTML and the CSS classes.
Requirements
- Standards-compliant (XHTML1.0/1.1, HTML5) or skinny doctype page - the control will not initialize on non-standards-compliant pages.
Supported Browsers
- 6
- 7
- 8
- 9
*Internet Explorer 6 displays the default browser dialog boxes, but the client API of Dialogs.JS is fully functional.
Configuring and Initializing Dialogs.JS
To copy a chunk of code from the listings below and keep its indentation, double click to select it, then right click and choose "Copy" from the context menu or use Ctrl + C.
1. Copy the entire Dialogs.JS folder in the root of your website. If you nest it in another folder, for example "Scripts", make set the correct path in the src attribute of the <script>...</script> tag in the second step.
2. Register the runtime of Dialogs.JS in the <head>...</head> section of your page:
<script type="text/javascript" src="Dialogs.JS/Scripts/jQuery.UI.Mouse.Draggable.Resizable.Core.js"></script> <script type="text/javascript" src="Dialogs.JS/Scripts/Dialogs.JS.js"></script>
3. Add the initialization and setup routine of Dialogs.JS in a <script>...</script> tag in the <head>...</head> of the page:
dialogsjs.pageload({
rootfolder: "",
skin: "Vista",
width: 350,
height: 170,
buttonwidth: 100,
confirmbuttontext: "OK",
cancelbuttontext: "Cancel",
alerttitletext: "Alert Box",
confirmtitletext: "Confirm Box",
prompttitletext: "Prompt Box",
overlaycolor: "#000000",
overlayopacity: "6",
animationduration: 500
});
4. Refresh the page. If the steps above have been observed correctly, at this stage Dialogs.JS will be initialized on the page. Refer to the next topic to learn how to show a dialog box, assign custom functions and add texts.
Public methods of Dialogs.JS
Dialogs.JS implements 5 public methods for component control - initialization (dialogsjs.pageload()), open a dialog box (dialogsjs.showalert(), dialogsjs.showconfirm() and dialogsjs.showprompt()) and get prompt value (dialogsjs.getpromptvalue()). The dialogsjs.pageload() method was explained in the previous topic, the rest follow:
dialogsjs.showalert(args)
Use to display alert dialog, set text (text), choose default focused button (defaultbutton) and optionally assign custom function (functiontrue) that will fire when the OK and close buttons / (ESC key) are clicked:
dialogsjs.showalert({
text: "Click OK, Close button or ESC to fire the custom function when the dialog closes.",
functiontrue: function(e){
alert("dialogsjs.showalert.functiontrue() was fired.");
},
defaultbutton: "ok"
});
If you do not have a custom function, use functiontrue: function(){}. The possible values of the defaultbutton are "ok", "cancel" and "none". For more detailed information, use the View Source command of your browser and take a look at the code.
dialogsjs.showconfirm(args)
Use to display confirm dialog, set text (text), choose default focused button (defaultbutton) and optionally assign custom functions (functiontrue, functionfalse) that will fire when the OK and close buttons / (ESC key) are clicked:
dialogsjs.showconfirm({
text: "Click OK to fire dialogsjs.showconfirm.functiontrue(), or Cancel ot ESC to fire dialogsjs.showconfirm.functionfalse().",
functiontrue: function(e){
alert("dialogsjs.showconfirm.functiontrue() was fired.");
},
functionfalse: function(e){
alert("dialogsjs.showconfirm.functionfalse() was fired.");
},
defaultbutton: "cancel"
});
If you do not have any custom functions, use functiontrue: function(){} and functionfalse: function(){}. The possible values of the defaultbutton are "ok", "cancel" and "none". For more detailed information, use the View Source command of your browser and take a look at the code.
dialogsjs.showprompt(args)
Use to display prompt dialog.
dialogsjs.showprompt({
text: "Click OK to fire dialogsjs.showprompt.functiontrue(), or Cancel ot ESC to fire dialogsjs.showprompt.functionfalse().",
functiontrue: function(e){
alert("dialogsjs.showprompt.functiontrue() was fired.");
},
functionfalse: function(e){
alert("dialogsjs.showprompt.functionfalse() was fired.");
},
defaultvalue: "0123456789",
defaultbutton: "ok"
});
The property values of the method are the same as the property values of the dialogsjs.showconfirm() method. There is an additional property for setting default value of the prompt's input - defaultvalue.
dialogsjs.getpromptvalue()
Get the value of the prompt's input box if it is needed for some purpose.
dialogsjs.getpromptvalue();
Properties of Dialogs.JS
rootfolder
Leave empty if the main Dialogs.JS folder is the root of your website. If Dialogs.JS folder is a child of another folder, set its name as value of this property, and do not forget the trailing slash, i.e:
rootfolder: "Scripts/"
If the Dialogs.JS folder is a child of another folder, you will also have to set the correct filepaths in the <script></script> files.
skin
Set skin to Dialogs.JS. Skins of the component are stored in the Dialogs.JS/Window.JS.DJS/Skins folder, and each skin name is the name of a folder inside the Skins directory, for example:
Dialogs.JS/Window.JS.DJS/Skins/Mac
... Should be set as:
skin: "Mac"
width
Requires integer representing the default width of the dialogs in pixels, for example:
width: 640
height
Requires integer representing the default height of the dialogs in pixels, for example:
height: 480
alerttitletext
Text of the titlebar of the alert box.
confirmtitletext
Text of the titlebar of the confirm box.
prompttitletext
Text of the titlebar of the prompt box.
confirmbuttontext
Text of the OK button.
cancelbuttontext
Text of the Cancel button.
animationduration
Integer representing the duration of the fade animations in milliseconds.
drag
Requires a Boolean value (true or false). If set to false, the dialog boxes will not be draggable.
buttonwidth
Integer, representing the width of the OK and Cancel buttons of the dialog boxes. Do not add "px", as units are added automatically by the component.
overlaycolor
Hex value for setting background color of the modal overlay. Do not forget the "#" before the color.
overlayopacity
Integer from 0 to 9 for setting the opacity of the modal overlay. 1 is fully opaque, 0 is fully transparent.
Difference Between the Trial and the Full Version
The Lite version of Dialogs.JS is fully functional, but displays a confirm box with trial message every 15 seconds and is shipped with one skin only. If you wish to remove these limitations and get the full set of 12 skins, you may purchase the full version via PayPal from this link.
If you consider purchasing more than one Acid.JS component you may create and order a custom Creative Web 2.0 Bundle and save money. More information about the Creative Web 2.0 Bundle program is available on my blog.
Upgrade to the Full Version after Purchase
After getting the full version you will notice that it contains only certain files, not the entire distribution required to run the script - the rest of the skins and JavaScript. You have to replace the files in the trial version distribution with the ones that you have received after having purchased the full version manually. After this, the control should work without trial notices and the emails sent by it will not contain trial strings.