Click here to Skip to main content
Click here to Skip to main content

Tagged as

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
Follow on   Google+   LinkedIn

Comments and Discussions

 
Questionpopup size too small PinmemberMember 103766132-Nov-13 15:00 
AnswerRe: popup size too small PinprofessionalAntariksh Verma7-Nov-13 18:49 
GeneralMy vote of 3 PinprofessionalBrian A Stephens29-Jul-13 5:00 
GeneralMy vote of 5 PinmemberMember 417507021-Jul-13 22:05 
GeneralRe: My vote of 5 PinprofessionalAntariksh Verma21-Jul-13 22:49 
QuestionWhy my code is not working ? PinmemberMember 417507021-Jul-13 19:52 
AnswerRe: Why my code is not working ? PinprofessionalAntariksh Verma21-Jul-13 20:34 
GeneralRe: Why my code is not working ? PinmemberMember 417507021-Jul-13 20:37 
GeneralRe: Why my code is not working ? PinprofessionalAntariksh Verma21-Jul-13 20:46 
GeneralRe: Why my code is not working ? PinmemberMember 417507021-Jul-13 21:36 
GeneralRe: Why my code is not working ? PinprofessionalAntariksh Verma21-Jul-13 21:44 
GeneralRe: Why my code is not working ? PinmemberMember 417507021-Jul-13 22:04 
QuestionNo votes for this article PinmemberJaydeep Jadav19-Jul-13 3:55 
AnswerRe: No votes for this article PinmemberPatrick Harris19-Jul-13 7:49 
AnswerRe: No votes for this article PinmemberPatrick Harris19-Jul-13 7:52 
GeneralMy vote of 4 Pinprofessionalsuresh_dasari18-Jul-13 22:47 
GeneralRe: My vote of 4 PinprofessionalAntariksh Verma18-Jul-13 22:48 
GeneralRe: My vote of 4 Pinprofessionalsuresh_dasari18-Jul-13 22:51 
GeneralMy vote of 1 PinprofessionalAhmed Bensaid18-Jul-13 22:30 
GeneralRe: My vote of 1 PinprofessionalAntariksh Verma18-Jul-13 22:33 
QuestionI don't want to give you just 1 ... PinmvpFlorian Rappl18-Jul-13 8:02 
QuestionShould mention that this is using jQuery UI library Pinmemberrbegley118-Jul-13 5:23 
AnswerRe: Should mention that this is using jQuery UI library Pinmemberprem parihar18-Jul-13 5:48 
AnswerRe: Should mention that this is using jQuery UI library PinprofessionalAntariksh Verma18-Jul-13 18:42 

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

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

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