Stylish JavaScript Dialog (Alert, Confirm, Prompt) Boxes

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.

sweet-alert
SweetAlert is a beautiful responsive highly customisable replacement for JavaScript’s “Alert”. It automatically centres itself on the page and looks great no matter if you’re using a desktop computer, mobile or tablet.

Options include:

  • A basic message
  • A title with a text under
  • A success message!
  • A message with auto close timer
  • A warning message, with a function attached to the “Confirm”-button…
  • Specific actions are triggered whether “Confirm” or “Cancel” was clicked

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.

Here are a few code examples of how easy it is to setup an alert once you included the plugin:

Alert

jAlert('This is a custom alert box', 'Alert Dialog');

Confirm

jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
    jAlert('Confirmed: ' + r, 'Confirmation Results');
});

Confirm

jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
    if( r ) alert('You entered ' + r);
});

Confirm

jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
    if( r ) alert('You entered ' + r);
});

With HTML

jAlert('You can use HTML, such as bold, italics, and underline!');

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 Comments

  1. Gabriel C.Gabriel C. says

    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).

  2. Jose says

    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. Jose says

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *