List of jQuery dialog styles with 5 demos

What is a jQuery dialog?

The dialog box is a great way to present some useful information to your website visitors.  It is a window that floats over the main content with a title bar and content area where you can include text, images, and videos. The dialog box may also contain an option to close the window by using “X” icon.

jQuery UI dialog widget makes it quite easier to design and place dialog boxes in your web pages. In this tutorial, I will show you creating simple yet elegant dialog alerts. I will use the default style as well as you will learn customizing dialog boxes according to your website theme.

By using the Modal option of dialog widget you can make other content of the web page disabled or not allowing visitors to interact with other content unless dialog box is closed.

List of dialog boxes with different styles

Following is the list of different jQuery dialog boxes with different styles and effects. For our demos I am using files as provided by jQueryui.com as follows:

  • jquery-1.10.2.js: As such jquery-ui works on top of the jQuery library, so we have to include this.
  • jquery-ui.js: jQuery-ui library
  • jquery-ui.css: This is the stylesheet provided by jQuery-ui, that contains styles including different widgets.
  • dialog-ui.css: This will be customized CSS that only includes CSS classes related to the dialog box. This will override classes provided by jquery-ui to our own style.

You can look at the demos and code by clicking the link with each dialog box below.

A simple dialog box with title bar and content inside with close button

Following is a simple dialog jQuery with a title bar and close button. The dialog will appear as the web page loads. The content inside the dialog is simply some information in a paragraph element. The dialog type is modal, i.e. you cannot interact with other elements of the web page unless dialog box is closed.

The effect of displaying dialog is using slide value while it will be closed with fade effect at given time in milliseconds.

See online demo & code

 

jquery dialog basic

The markup:

 The jQuery code:

You may get the complete code and view live demo by clicking the above image or link.

Dialog box with Ok button

Following is a jQuery message alert box that has a title bar along with a close button. Then we have the content area, where a message is shown to the visitor and at the button an Ok button.

The effect used is Bounce while displaying the dialog box After pressing the close or escape key or Ok button, the alert will be closed using fade effect.

See online demo & code

jquery modal dialog

The jQuery code used in this example:

In the demo, I have kept this dialog in jQuery as Modal. You can remove this line to keep other content active or change its value to false.

modal: false

 A jQuery confirmation dialog with highlight effect

In this confirmation dialog box, a user is given two options to choose from. You can perform different actions based on selection by the user. In this demo, we have used “Are you sure you want to proceed to example.com?” with Yes and Cancel options.

As this dialog appears, it has highlighted effect while upon selecting Yes or Cancel the dialog will disappear with puff effect.

See online demo & code

jquery_dialog_

The markup:

 The CSS:

 jQuery code:

 

I have used in-page CSS for this demo. The dialog classes in our internal CSS will override the default CSS classes. The dialog box is without a title bar and close button, which is made hidden by using:

display: none;

CSS property at ui-dialog .ui-dialog-titlebar class.

A modal dialog that closes by clicking anywhere outside

In the above demo, we have seen jquery UI dialogs are closed only by clicking on ‘x’ button or pressing the escape key in the keyboard. Also, you can close it by clicking on Ok or Cancel buttons.

The following jQuery modal dialog alert will be closed as you click anywhere outside the dialog box as well as using above mentioned options.

See online demo & code

jquery_dialog_1_0_4

The jQuery code:

 

The task to hide or close the dialog box by clicking anywhere is accomplished in open: function() part of the script where I used jQuery On method.

Dialog box with different color buttons

In this dialog box, I am using different colors than default by using the ui-dialog-buttonset class in the internal CSS. You can change colors and other properties as per the need of your theme quite easily.

The dialog uses two buttons, Yes and Cancel. Upon clicking both will show an alert, where you can place your code for intended action. Also, this is a non-modal dialog box.

See online demo & code

jquery_dialog_1_0_5

Also see:

jQuery sliders