Setting up a basic JQuery Dialog [Part 1]


This will be part 1 of a multiple part blog. In part I will discuss how to implement a dialog using jQuery and JavaScript.

English: jQuery Mobile logo.

English: jQuery Mobile logo. (Photo credit: Wikipedia)

To implement a dialog , I have the following code structure:

<html>

<head>

<!– Implement  script here–>

</head>

<body>

<!– implement –>div to bind jQuery dialog to–>

</body>

</html>

We will start with the script portion located between the tags, note you can place the script in the head or in the body.

Here is the script below:

<script type=”/text/javascript”>

$(“#div_dialog”).dialog({
modal: true,
buttons: {
Ok: function () {
$(this).dialog(“close”);
}
}
});

$(“#opener”)
.button()
.click(function () {
$(“#div_dialog”).dialog(“open”);
});

</script>

This is a basic dialog declaration, first a few things,  #div_dialog refers to a div we will place in the body. This is a modal dialog, meaning that it prevents the user from interacting with the rest of the page while the dialog is open. The OK button closes the dialog.

Now for the div declaration in the body of the html. The div is needed because like most jQuery structures they need a div or an html element to anchor or bind to.

Simply place this is the body:

<div id=”div_dialog“>

</div>

you don’t had to give it an id of div_dialog,  you can name it whatever you please. We will also add a button to trigger the dialog to open.

Simply place this code in the body as well:

Add the following to your script:

$(“#opener”)
.button()
.click(function () {
$(“#div_dialog”).dialog(“open”);
});
We are simply adding a jQuery function that says when the opener button is clicked  open the dialog.
Here is the complete code below or a sexier formatted version at JSFIDDLE : Basic Jquery dialog

<html>

<head>

<script type=”/text/javascript”>

$(“#div_dialog”).dialog({
modal: true,
buttons: {
Ok: function () {
$(this).dialog(“close”);
}
}
});

$(“#opener”)
.button()
.click(function () {
$(“#div_dialog”).dialog(“open”);
});

</script>

</head>

<body>

<div id=”div_dialog“>

<h2>This is a dialog</h2>

</div>

<button type=”button”  id=”opener”>Open dialog!!</button>

</body>

</html>

That should be all you need for a simple dialog. In part 2 I will show you how to make a useful dialog with a form to gather information.

Cheers

Advertisements

2 Responses to Setting up a basic JQuery Dialog [Part 1]

  1. Pingback: How to Click JQuery Dialog Buttons with Watin » The Cutting Ledge

  2. Pingback: How to hide close button on jQuery Dialog | Jayesh Chandrapal

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: