Stylish JavaScript Dialog (Alert, Confirm, Prompt) Boxes

Posted on January 13, 2009, under Flash, jQuery 

The following list is useful if you need to replace the classical JavaScript message boxes (alert, confirm, prompt) with new and CSS customizable ones. JQuery and MooTools are some of the libraries used to make these excellent dialog boxes.

jquery-alert

jQuery Alert Dialogs Plugin is meant to replace the basic functionality provided by the standard JavaScript alert(), confirm() and prompt() functions. These custom methods are completely customizable via CSS, each dialog can have its own title, and also provide an advantage to the usage of prompt() in IE7, where users get an ugly warning and usually have to reload the page. This modal dialog box automatically positions itself if you resize the browser window. If the jQuery UI Draggable plugin is included, the box can be moved by dragging its title bar.

Sexy Alert Box

Sexy Alert Box is a “sexy” clone of the classic JavaScript alert. It is based on PBBAcpBox, a script that has been discontinued. However, it was released under a free license, and eventually adapted to version 1.2 of Mootools. This is an awesome script, because it shows the messages in a more beautiful design and works in modern browsers, such Internet Explorer.

custom-javascript-dialog-box

Custom JavaScript Dialog Boxes is a lightweight JavaScript dialog box library that offers four dialog styles: alerts, warnings, prompts and success. The ‘look and feel’ can easily be changed through the CSS and additional styles can easily be added by adding 2 lines of CSS. It has an autohide feature which is used to fade out the dialog box after a specific number of seconds.

jquery-ui-basic-modal-dialog

The JQuery UI Dialog Box is an awesome widget meant to work as an alternative for the classical JS dialog boxes. The design can be edited through CSS. Examples: modal dialog, message, confirmation, form. You can choose a design from 17 already created themes.

jquery-impromptu

JQuery Impromptu is a quick tool to prompt user input in a fashionable way. More or less it is a great replacement for an alert, prompt and confirm. It does not only replaces these, but it also allows for creating forms within these controls. The plugin is minified using JS Minifier.

Comment via Facebook

comments

3 Replies to "Stylish JavaScript Dialog (Alert, Confirm, Prompt) Boxes"

  1. Hi. I am trying to use the “Stylish JavaScript Dialog (Alert, Confirm, Prompt) Boxes” but I can’t get it to work. The file example you provided does not contain a URL for the onclick botton event.

    This is what I am trying: but the alert box appear and jumps to the uRL (google.com in this without case) confirming.

    It only works without the url, as the sample provided.

    Do you have a working sample that I can test. Thanks for your help.

  2. I still can’t get it to work. I need help with the structure of the button code. Here’s the button as I have it:

    <input id="confirm_button" type="button" value="Show Confirm" a href="http://www.google.com&quot; />

    And I would also like it to work with a text link instead of a button:

    Delete Me

    Once again, thanks for your help.

  3. You didn’t specify what’s the script you are talking about. Anyway, you should just use the ID as a selector (it doesn’t matter whether it’s a button or a link).

Leave a Reply


* = required fields

  (will not be published)


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: If you want to post CODE Snippets, please make them postable first!
(e.g. <br /> should be converted to &lt;br /&gt;)

POSTING RULES:

  • The comment must be relevant with the topic of the post.
  • Only comments with real email addresses will get approved. So, emails like 'abc@domain.com' will not be accepted.
  • Do not post the same message in multiple articles through the site.
  • Do not post advertisements, junk mail or pyramid schemes.
  • In case you post a link to another site, please explain briefly where the link goes as a courtesy to other users.
  • Do not post comments such as: "Thank you", "Awesome", "Nice tutorial", "Merci", etc.