Creating a Dialog with jQuery UI

This post is more than 2 years old.

Yesterday I blogged about using jQuery to create automatic hot links around certain words in your page text. While working on that demo, I tried to use the jQuery Dialog widget. I ran into some trouble and gave up, but returned to it this morning to see if I could get it working.

Unfortunately things didn't work out too well for me. I ran into more than one issue, but I had some great help from the folks on the jQuery team. I'd like to specifically call out Rey Bengo, Richard Worth, and Scott Jehl for helping me out. Things actually got ridiculously easy after their support, but I figured a blog post may help others as well. So let's get started!

The first thing you have to know about the jQuery UI stuff is that it is not included in your core jQuery download. You have to download a few additional files before you start using the UI items. You can start at the jQuery UI Download page and select either the latest stable release, the preview release, or use the custom downloader. If you are a newbie like me, I strongly urge you to select the preview release. 99% of the trouble I had today went away when I simply switched from the latest stable 1.5.x release to the 1.6 RC. Let me repeat this. Do not download 1.5. Life will come to an end - chaos will reign - and you will pull out what remains of your hair. From what I've been told, 1.6 will be released very shortly (very very shortly apparently), so it's not like your working with a beta copy.

Once you download the zip, the next thing you will notice is that you don't simply have one simple JS file. Instead you have a complete package of JavaScript, CSS, and HTML files. There are two important folders here. The UI folder is your javascript collection. The themes folder is your skins folder. For my example code I took both folders and copied them to my demo:

Alright, so next we will create a very simple html page. I based my code on the dialog documentation page with one big change. Their demo code runs the dialog immediately when the page loads. I think in almost all cases folks will want to show a dialog based on some event. Here is what I came up with:

<html>

<head> <script src="js/jquery.js"></script> <script src="js/ui/ui.core.js"></script> <script src="js/ui/ui.dialog.js"></script> <script> function showDialog(){ $("#example").dialog(); return false; } </script>

</head>

<body>

<p> <a href="" onclick="return showDialog()">Show the Dialog</a> </p>

<div id="example" class="flora" title="This is my title">I'm in a dialog!</div>

</body> </html>

Going through the file, here are some important things to note. The dialog documentation says that the only required file is ui.core.js. That is not true. You also have to include ui.dialog.js. Maybe that's obvious, but I had assumed that ui.core.js simply contained the code for all the widgets. The one and only function, showDialog, demonstrates how easy it is to create the dialog. You point to an existing div and run dialog(). Yeah, that's really hard. Can I still bill by the hour and use jQuery?

Scrolling down, you can see my simply link to run the function, and lastly the actual div for my dialog. This works, and you can see it in action here:

http://www.coldfusionjedi.com/demos/jqueryuitest2/test1.html

But it has a few problems. First off, the dialog is visible on page load. Secondly, the UI leaves a bit to be desired:

So how do we fix this? First off, to make the dialog hidden on load, we can simply add a bit of CSS to it:

<div style="display: none;" id="example" title="This is my title">I'm in a dialog!</div>

To load the default skin, we use a CSS from the themes folder we copied over earlier:

<link rel="stylesheet" href="themes/base/ui.all.css" type="text/css" media="screen">

And that's it! Check out the sexy dialog! It is the most sexiest dialog I've seen in my life. (Ok, I may just be a bit happy that I finally got it working.)

You can see it in action here: http://www.coldfusionjedi.com/demos/jqueryuitest2/test2.html Don't forget you can view source to see the entire page.

None of this worked for when I was using 1.5, so be sure to use the release candidate of 1.6!

Ok, so with things working well now, I decided to go crazy and try to apply a custom theme. I went to ThemeRoller and grabbed one of the presets - Mint Choc. As before, the zip you get is a bit big and may confuse you. (Well, it confused me at first.) After extracting the zip, the folder you want is jquery-ui-themeroller/theme. I renamed theme to mint and put it within my themes folder. I then changed the CSS to

<link rel="stylesheet" href="themes/mint/ui.all.css" type="text/css" media="screen">

and it just plain worked!

You can see this in action here: http://www.coldfusionjedi.com/demos/jqueryuitest2/test3.html

All in all, I'm pretty pleased with the UI stuff, once I got past my brain cramps with it. I seem to remember having similar issues with the core jQuery library as well and I'm over that as well, so maybe it's simply something that I have to get used to.

I'll leave off with one more quick tip from Richard Worth. Remember my trouble with hiding the div on page load? He pointed out that you can also dynamically create dialogs with strings:

$("<div>I'm in a dialog</div>").dialog()

That's pretty slick. I'm not sure if that is documented though. To be honest, I feel a bit weird putting stuff on the page that isn't visible. I'll probably use this form instead.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Raymond Camden posted on 2/2/2009 at 2:56 AM

Forgive me posting a comment to my own blog post. You may notice that if you close one of the dialogs, it won't reopen. That's a bug in how I used the dialog. I've got a fix for that, but figure it should be it's own blog entry instead. So I'll do a follow up later tonight. (Depending on how much fun I have during the Superbowl, 'later tonight' might be tomorrow morning.)

Comment 2 by Scott Jehl posted on 2/2/2009 at 2:59 AM

Thanks Ray. Glad to hear 1.6 made it easier.
We'll get this all documented and tutorialized on the UI site once 1.6 final is released.

Also, there are a bunch of resources available that can help minimize confusion for those getting started with jQuery UI. Check the articles, blogs and feeds listed on the UI site's support page: http://jqueryui.com/support

Cheers!

Comment 3 by Raymond Camden posted on 2/2/2009 at 2:59 AM

For folks who want to see a fix (in regards to my last comment), please see: http://www.coldfusionjedi.c...

You will also see the theme: Swanky Purse, a name I just absolutely love. Anyway, view source to see what I changed, and I promise a follow up post later.

Comment 4 by Akira posted on 2/2/2009 at 7:13 PM

I've got a fix for the dialog not reopening too. The thing I've noticed is that it is being closed and not destroyed. I had to change the close to an actual remove:

close: function(ev, ui) {
$(this).remove();
}

Comment 5 by Joel Cox posted on 2/2/2009 at 7:46 PM

It's possible to bind the javascript event to the anchor tag directly with jQuery and reduce this to a single function call:

<script>

$(document).ready(function() {
$("#example").dialog({autoOpen:false});
$("#opener").click(function(event){
event.preventDefault();
$("#example").dialog("open");
});
});

</script>
</head>
<body>
<p> <a href="javascript:;" id="opener">Show the Dialog</a> </p>
<div style="display: none;" id="example" title="This is my title">I'm in a dialog!</div>

I had some issues with IE6 (Windows) not functioning correctly when binding to an anchor tag without adding the event.preventDefault() function call.

Comment 6 by Raymond Camden posted on 2/2/2009 at 7:48 PM

Interesting, I'd like you guys to compare this to my solution - but can we wait till I post it? (Soon I promise.)

Comment 7 by Ralph Whitbeck posted on 2/2/2009 at 9:21 PM

the jQuery team is the best for being approachable and willing to help other users out that have problems. I haven't seen another project that has had willing support people help out in a pinch.

Comment 8 by Rey Bango posted on 2/2/2009 at 9:26 PM

@Ray: Glad to see you got it working well. 1.6rc6 is really solid

@Ralph: Thank you for the kind words. The jQuery & jQuery UI teams are all about community. We're glad to help.

Comment 9 by Seth posted on 2/2/2009 at 9:42 PM

There are additional options within the dialog() function. The autoOpen: 'false' will make the dialog not appear on load. IMO, it is better to utilize the functions options, than use the CSS to do the work that the function does on it's own.

Comment 10 by Raymond Camden posted on 2/2/2009 at 9:56 PM

@Seth: Seth, I covered this in the blog entry I wrote this morning: http://www.coldfusionjedi.c...

Well, I didn't cover _all_ the options, but you get the idea. ;)

Comment 11 by Susan posted on 3/26/2009 at 11:49 AM

It's very helpful..Thanks a lot ^^

Comment 12 by Jerry posted on 4/22/2009 at 2:33 PM

Is it possible to pass the value of a link to jQuery dialog window.

Comment 13 by Raymond Camden posted on 4/22/2009 at 3:53 PM

What do you mean by pass the value of a link? Do you simply mean: When I click on a link in the greater window, I want to load the contents in the dialog instead.

Comment 14 by Mikee posted on 5/14/2009 at 9:37 AM

This solution still limits you to only change the style and the features of the dialog box via themeRoller, which is somewhat restricting.

There's a better solution here in which you can enable the box to open multiple times AND pass events and options within the dialog() function's parameters:

http://blog.nemikor.com/cat...

Comment 15 by thaianhduc posted on 5/14/2009 at 12:34 PM

Hi guys,
I had small problem with the dialog. I had a table to nest my stuff and a div to show as a dialog. Everything seems work fine except that, the dialog was opened under the table. It looked terrible.
Here is the code:

<div id="viewBookDialog" title="Chi tiet book">
chi tiet ve sach herer test first
</div>
<table style="width:100%;">
....stuff here ....
</table>
The viewBookDialog is support to show the dialog.
Instantate dialog:
$("#viewBookDialog").dialog({
bgiframe: true,
autoOpen: false,
height: 300,
modal: true,
position: 'top'
});

Does anyone have any clue? Please help.

Comment 16 by Raymond Camden posted on 5/14/2009 at 3:39 PM

This online where we can see it?

Comment 17 by thaianhduc posted on 5/15/2009 at 6:34 AM

Sorry Raymond, it is my stupid to forget include all stylesheet needed. By looking at detail using FireBug addon, i fixed the problem already. I lacked of adding ui.core.css :(
Thank for your consideration.

Comment 18 by Henrik posted on 10/21/2009 at 2:57 PM

Hi - thanks for this, I ran into the problem of my dialog not re-opening; your fix worked great!

Cheers

Comment 19 by Amy posted on 11/8/2009 at 3:54 AM

Thanks, I was having trouble figuring this out myself, as a beginner to javascript and jQuery. But I got it working after reading this post!

Comment 20 by Indialike posted on 1/20/2010 at 5:33 PM

Very nice and useful tutorials for web designers,
Thanks for posting.

Comment 21 by qamar posted on 5/31/2010 at 10:32 AM

u dont have to hide the dialog by setting css properties, you just can do it from dialog itself, just put the following lines in ur jscript while initializing the dialog box
$(foo).dialog({ autoOpen: false })

Comment 22 by brijesh jain posted on 9/8/2011 at 9:11 AM

Hi,

I am writing a dialog popup to perform some task through it. Popup is opening up fine for the first time but its not showing up for the second click. Here is the code I am using to open the popup, Can you please let me know whats wrong here?

$(document).ready( function() {
$( "#ALERT_POPUP" ).dialog({
autoOpen: false,
height:400,
width:900,
modal:true,
show: 'slide',
hide: 'slide',
close: function(ev, ui) {$(this).remove();}
});
});

$( "#alertPopup").click(function() {
$.ajax({
url: "alertAction.do?reqCode=aler...",
success: function(returnedData){
$('#ALERT_POPUP').empty().append(returnedData).dialog('open');
return false;
}
});
});

Comment 23 by Raymond Camden posted on 9/10/2011 at 1:55 AM

Not sure. What do Chrome Dev Tools or Firebug report? You may have an error being thrown.

Comment 24 by falak posted on 9/28/2011 at 10:42 AM

Whenever I click on an element in the drawing area, its properties window will open. I wanted to create this properties window using this dialog box. Is it possible?

Comment 25 by Raymond Camden posted on 9/28/2011 at 4:58 PM

What drawing area are you talking about?

Comment 26 by Falak posted on 10/6/2011 at 9:00 PM

I have a canvas from RaphaelJS (the Raphael paper) that is my drawing area. I can drawing rectangles, circles, ellipses and images etc. Now if I click any of these object, their properties window will open up.

Comment 27 by Raymond Camden posted on 10/7/2011 at 6:16 AM

I'm sorry - but your comments are not even making sense here. I really don't see where your questions match up with the topic at hand.

Comment 28 by Vikram posted on 1/25/2012 at 2:17 AM

awesome! thanks!

Comment 29 by Paul posted on 2/24/2012 at 5:07 PM

Thanks for this. I notice most of the examples are fairly simple one-page examples. How could this be applied, for example, to the following situation:
1) Click a link to a page requiring login.
2) Hit that page, but immediately popup the dialog requiring login
3) Once logged in, destroy the dialog and display the page

Alternatively, popup the login dialogue BEFORE hitting the page, and redirect once logged in. I'm not sure which is better or more appropriate.

Comment 30 by Raymond Camden posted on 2/24/2012 at 5:16 PM

What you want to do _could_ be done but _should not_ be done. Since I can dismiss a jQuery UI dialog via JS, I'd simply use my console to dismiss it and see the page. If you want something to stay secure (or behind a login), you _can't_ return it and just hide it with a client side dialog. That isn't secure at all. Also, if your secure page is based on a user id, like maybe it shows "Hi Ray", you would have ot update all the dynamic content after you login.

As to your second question - it is possible, in theory. Imagine your home page has a link to Profile, you can use jQuery to notice that click and pop up a dialog to log you in first. Again though you shouldn't rely on JUST JavaScript to to do this.

Comment 31 by sheir posted on 4/7/2012 at 2:21 AM

Wondering if I am asking the impossible, if I am, forgive me as I am new to mvc3, jquery.
I just posted my question on stackoverflow.

Basically how can I get my Controller (in MVC3/razor) to return a popup when the user types in a url that goes to my application; without loading up my application.

The url would have querystring params which would magically get converted to my view model which is a param in my Controller method. I then want a popup to be displayed.

Is that impossible to do??

http://stackoverflow.com/qu...

Comment 32 by Raymond Camden posted on 4/9/2012 at 6:20 PM

Sorry man - no idea what you mean. It sounds like:

I have a text field. If the user enters a particular URL, I do a popup.

If so - you would listen to the keyup event (there are others) and check the value. When the value == what you care about, do a popup.

Comment 33 by Mohammad posted on 5/10/2012 at 10:25 AM

I get "$.widget is not a function" error when page loads

Comment 34 by Raymond Camden posted on 5/10/2012 at 3:55 PM

Check to ensure all your JS libraries properly loaded.

Comment 35 by Bhushan posted on 3/21/2013 at 6:32 PM

Hi,
I seen your links for dialog box(below links),
http://www.coldfusionjedi.c...
http://www.coldfusionjedi.c...

!st time its working fine. when we click on second time, the dialog box was not show.

can you provide any solution for this, I'm facing same problem.

Comment 36 by Raymond Camden posted on 3/21/2013 at 7:05 PM

The answer is here: http://stackoverflow.com/qu...

Basically, my code is doing it wrong. ;) But the SO answer explains it exactly.

Comment 37 by Bhushan posted on 3/22/2013 at 5:36 PM

Thanks for your reply. its not clear for me.

can you please provide any JSfiddle link for this example.

Comment 38 by Raymond Camden posted on 3/22/2013 at 5:43 PM

If you are asking me to write an example of jQuery UI, I'd ask you to instead please visit their site to read the docs there. It doesn't make sense for me to just repeat their documentation for you.

Comment 39 by Ranjeet posted on 5/3/2013 at 11:43 AM

it's not working on second time.
After refreshing working, it s not a good

Comment 40 by Raymond Camden posted on 5/3/2013 at 2:48 PM

Ranjeet, please read the comments above yours. This is covered.