Click here to Skip to main content
13,198,850 members (45,248 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

74.9K views
15 bookmarked
Posted 18 Jul 2013

Implementation of Dialog Box using jQuery UI Library

, 25 Jul 2013
Rate this:
Please Sign up or sign in to vote.
This tip helps you to implement a dialog box using jQuery.

Introduction

This tip helps you to implement a dialog box using jQuery. It is often required in multiple web applications that on the click event, a dialog box is opened. This tip is basically for beginners.

For implementation of the dialog box, we have to follow the below steps:

Step 1

First of all, you have to add jQuery library in your project. You can download the latest version from jquery.com:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

You have to add the link of Jquery-ui.css as below:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 

Step 2

Make a div tag in your page and put the content of the dialog box within it.

<div id="dialog" title="Alert">
<p>
Hello this is my first dialog using</p>
</div> 

Step 3

Put a button using simple HTML with id “opener”.

<input type="button" id="opener" value="show Alert" />

Step 4

In the script tag, put the jQuery code for opening the dialog box:

<script type="text/javascript">
$(document).ready(function () {
    $(function () {
        $("#dialog").dialog({

            autoOpen: false,
            modal: true,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            }
        });
    });
});
</script>

Step 5

Put on click event within the script tag, on clicking which a dialog box is opened.

$("#opener").click(function () {
    $("#dialog").dialog("open");
});

Note

  • dialog’ is the ID of a div which is opened as a dialog box.
  • opener’ is the ID of the button on click of which a dialog box is opened.
  • modal = true is for disabling the back side content.
  • show and hide are for special effects.

The pictorials view of the dialog box is shown in the figure:

Step 6

If you want your dialog box to be more interactive with colours, you can add the following function of jQuery:

$("#opener").click(function () {
    var state = true;
    if (state) {
        $("#dialog").animate({
            backgroundColor: "purple",
            color: "white",
            width: 500
        }, 1000);
    }
});

Now the dialog box looks like:

I hope this will help beginners. Thanks!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Antariksh Verma
Software Developer
India India
No Biography provided

You may also be interested in...

Pro
Pro

Comments and Discussions

 
Questionpopup size too small Pin
Member 103766132-Nov-13 15:00
memberMember 103766132-Nov-13 15:00 
AnswerRe: popup size too small Pin
Antariksh Verma7-Nov-13 18:49
professionalAntariksh Verma7-Nov-13 18:49 
GeneralMy vote of 3 Pin
Brian A Stephens29-Jul-13 5:00
professionalBrian A Stephens29-Jul-13 5:00 
GeneralMy vote of 5 Pin
Member 417507021-Jul-13 22:05
memberMember 417507021-Jul-13 22:05 
GeneralRe: My vote of 5 Pin
Antariksh Verma21-Jul-13 22:49
professionalAntariksh Verma21-Jul-13 22:49 
QuestionWhy my code is not working ? Pin
Member 417507021-Jul-13 19:52
memberMember 417507021-Jul-13 19:52 
AnswerRe: Why my code is not working ? Pin
Antariksh Verma21-Jul-13 20:34
professionalAntariksh Verma21-Jul-13 20:34 
GeneralRe: Why my code is not working ? Pin
Member 417507021-Jul-13 20:37
memberMember 417507021-Jul-13 20:37 
GeneralRe: Why my code is not working ? Pin
Antariksh Verma21-Jul-13 20:46
professionalAntariksh Verma21-Jul-13 20:46 
GeneralRe: Why my code is not working ? Pin
Member 417507021-Jul-13 21:36
memberMember 417507021-Jul-13 21:36 
GeneralRe: Why my code is not working ? Pin
Antariksh Verma21-Jul-13 21:44
professionalAntariksh Verma21-Jul-13 21:44 
GeneralRe: Why my code is not working ? Pin
Member 417507021-Jul-13 22:04
memberMember 417507021-Jul-13 22:04 
QuestionNo votes for this article Pin
Jaydeep Jadav19-Jul-13 3:55
memberJaydeep Jadav19-Jul-13 3:55 
AnswerRe: No votes for this article Pin
Patrick Harris19-Jul-13 7:49
memberPatrick Harris19-Jul-13 7:49 
AnswerRe: No votes for this article Pin
Patrick Harris19-Jul-13 7:52
memberPatrick Harris19-Jul-13 7:52 
GeneralMy vote of 4 Pin
suresh_dasari18-Jul-13 22:47
professionalsuresh_dasari18-Jul-13 22:47 
GeneralRe: My vote of 4 Pin
Antariksh Verma18-Jul-13 22:48
professionalAntariksh Verma18-Jul-13 22:48 
GeneralRe: My vote of 4 Pin
suresh_dasari18-Jul-13 22:51
professionalsuresh_dasari18-Jul-13 22:51 
GeneralMy vote of 1 Pin
Ahmed Bensaid18-Jul-13 22:30
professionalAhmed Bensaid18-Jul-13 22:30 
GeneralRe: My vote of 1 Pin
Antariksh Verma18-Jul-13 22:33
professionalAntariksh Verma18-Jul-13 22:33 
QuestionI don't want to give you just 1 ... Pin
Florian Rappl18-Jul-13 8:02
mvpFlorian Rappl18-Jul-13 8:02 
QuestionShould mention that this is using jQuery UI library Pin
rbegley118-Jul-13 5:23
memberrbegley118-Jul-13 5:23 
AnswerRe: Should mention that this is using jQuery UI library Pin
prem parihar18-Jul-13 5:48
memberprem parihar18-Jul-13 5:48 
AnswerRe: Should mention that this is using jQuery UI library Pin
Antariksh Verma18-Jul-13 18:42
professionalAntariksh Verma18-Jul-13 18:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171020.1 | Last Updated 25 Jul 2013
Article Copyright 2013 by Antariksh Verma
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid