Acid.JS Web 2.0 Component Library

Skinnable Browser Dialogs 4.0

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 of the prompt... Everything so Web 2.0 and easy to use!

Demo

Click on the links below to test the three different types of dialog boxes.

Configuration File of Dialogs.JS

The common configuration settings of Dialogs.JS are stored in the Dialogs.JS/Dialogs.JS.xml file. Below is a sample of that file. Please, check the manual included in the distribution of the control for detailed explanation of the properties of the XML file.


<?xml version="1.0" encoding="utf-8" ?>
	<dialogsjs 
	skin="Default" 
	confirmbuttontext="OK" 
	cancelbuttontext="Cancel" 
	alerttitletext="Alert Box" 
	confirmtitletext="Confirm Box" 
	prompttitletext="Prompt Box" 
	width="320" 
	height="154" 
	buttonwidth="100">
</dialogsjs>

Public methods of Skinnable Browser Dialogs

Dialogs.JS implements 5 public methods for component control - initialization, open a dialog box and get prompt value. These methods are explained below.

  • dialogsjs.init() - initialize the component
  • dialogsjs.showconfirm(text, okcallback) - open alert dialog, set text to it (text) and fire a custom function (callback) when OK / Close / Esc buttons are clicked
  • dialogsjs.showalert(text, okcallback, cancelcallback) - open confirm dialog, set text to it (text), fire a custom function (okcallback) when OK button is clicked and fire a custom function (cancelcallback) when Cancel is clicked
  • dialogsjs.showprompt(text, okcallback, cancelcallback, inputvalue) - open prompt dialog, set text to it (text), set value to the input (inputvalue) and fire a custom function (callback) when OK button is clicked and fire a custom function (cancelcallback) when Cancel is clicked
  • dialogsjs.getpromptvalue() - get the value of the prompt's input box

Dialogs.JS and Accessibility

Like the default browser dialogs, the alert, prompt and confirm boxes created by Dialogs.JS support Enter and ESC keystrokes.

Using Dialogs.JS to Validate Forms

Dialogs.JS is very flexible and can be implemented in different scenarios. Below is an example of how the component can be used to validate forms.

Skins

Click on the image below to view the full set of 12 skins that is shipped with the full version of Dialogs.JS

Browser Support

Dialogs.JS works with all major browsers. Internet Explorer 6 users will see the default browser's alert, prompt and confirm dialog boxes.

  • Internet Explorer 6
  • Internet Explorer 7
  • Internet Explorer 8
  • Mozilla FireFox
  • Opera
  • Google Chrome
  • Apple afari

Requirements

Below are the requirements to run the component normally.

  • Standards-compliant (XHTML 1.0/1.1 or HTML5) web page. Quirks mode is not supported.
  • Web-server (Apache, IIS).
  • AJAX-capable and JavaScript-enabled browser.

Dialogs.JS Manual

The manual (Adobe PDF file) for the component is included in the demo distribution you have downloaded.

Differences Between the Lite and the Full Version

The Lite version of Dialogs.JS is fully functional, but displays a confirm box with trial message every 60 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 for USD20 from this link.