Displaying a Confirmation Dialog with the jQuery UI Dialog

Often users are required to 'read' or 'acknowledge' a terms of use, license agreement or some other form of legal disclaimer before they can either use the software, web site or tool online. Microsoft does it all over the place as a CYA measure when we download many patches, tools or other utilities that are hosted or promoted by Microsoft. For example when you download code from CodePlex.com.

I have had several clients over the years require some sort of acknowledgement before allowing a user to proceed. Of course 99%+ of us never read any of the legal speak, I mean we do have lives after all. But no matter, the agreeing to the disclaimer is a key legal action on the part of any web site owner that needs to have something to fall back on when a customer complains or worse yet, tries to sue them.

Over the years I have built a mechanism to handle this requirement, but as I learn and adopt jQuery I have decided to scrap that work in favor of the jQuery UI Dialog. There are many good tutorials available on the net on implementing the Dialog component of jQuery UI, but I found I still needed to customize the experience to truly get a confirmation dialog.

I have added another page to the Contact Form sample, ConfirmDialog.aspx, I have been working with the past few months in my Thin ASP.NET series. This page invokes a confirmation dialog when the page is loaded. Of course you could invoke the dialog from a link or button click or any other event available in the page's DOM.

First you need to get jQuery UI library from jQuery. You can customize it, but I have not had any success getting a customized zip file from the site, so customize at your own risk (see there is a disclaimer). Once you have downloaded the library you need to add the script, CSS and image files to your web site.

  • jquery-ui-1.7.1.custom.js
  • jquery-ui-1.7.1.custom.css
  • The Images in the css/smoothness/images folder (see Figure Below)

Now of course you need to add references to the CSS and JS file in your web page:

<

head

id

="Head1"

runat

="server"

>

<

title

>

jQuery Contact Form with Confirmation

</

title

>

<

link

href

="jquery-ui-1.7.1.custom.css"

rel

="stylesheet"

type

="text/css"

/>

<

script

src

="js/jquery-1.3.2.min.js"

type

="text/javascript"

></

script

>

//....

<script src=

"js/jquery-ui-1.7.1.custom.js"

type=

"text/javascript"

>

</

script

>

// Other includes .....

</

head

>

Now you have to add a script to launch the dialog. Now I am doing an inline script for this demonstration, I do encourage you to place it in a script file for a final production version.

<script type=

"text/javascript"

> $(

function

() { $(

"#IAgree"

).dialog({ bgiframe:

true

, resizable:

true

, height: 640, width: 640, modal:

true

, closeOnEscape:

false

, overlay: { backgroundColor:

'#000'

, opacity: 0.65 }, buttons: {

'I Agree'

:

function

() { $(

this

).dialog(

'close'

); } ,

'Cancel'

:

function

() { window.location =

'privacy.aspx'

; } } }); $(

".ui-dialog-titlebar-close"

).hide(); });</script>

Now lets evaluate this script block. First I am of course using the familiar jQuery Ready function, $function(){}. Then I call the 'dialog' method from the DIV that is serving as our dialog (more on it later). The next few lines set various properties associated with the dialog itself. Such as if it is resizable (which I like to do), dimensions and if it is model. Now if you set it to modal this means the page content behind the dialog is not accessible, which for a confirmation dialog is the desired behavior.

Setting closeOnEscape to false is important for a confirmation dialog because allowing a visitor to access the form/content, etc without clicking the all important 'I Agree' button is not acceptable. I am going to jump ahead in the code, but come back to this point later. While we are keeping the user from closing the dialog without confirming by eliminating the escape key, we also have to eliminate the dialog's close icon in the top right corner. I could not find a setting to control the display of this icon, nor did I have the patience to adjust the dialog's CSS. So I wrote a quick jQuery selector and called the 'hide()' function of the element.

$(".ui-dialog-titlebar-close").hide();

The overlay setting designates what color will be displayed behind the dialog and of course what its opacity is. I generally set this to black with a mid-range opacity. You want the user to realize the page is there, otherwise many will get confused. Setting opacity at 65% seems to be the most optimal in my experiences.

Now for the Buttons. We use two buttons on the dialog, the 'I Agree' of course, and a 'Cancel'. You could easily rephrase the cancel button to 'I Decline' or any other suitable phrase. The phrases are set in the function itself. Both of the functions have an inline function defined that is used to designate their actions upon clicking. The 'I Agree' button simply closes the dialog, $(

this

).dialog(

'close'

);. You could also extend this if you wanted proof the user chose to agree by sending a notification back to the server via AJAX, but that is another post all together.

The 'Cancel' button does not close the dialog, but redirects the user to the site's privacy policy page. Again you could perform any action you wanted to in this custom function definition. It is important to understand why I redirected the user to another page. You need to make sure they cannot access the page content without agreeing to the terms. This takes care of that, as long as they have JavaScript enabled. So in those rare cases you are going to have to be creative in how you handle that. In most cases you are going to need to do an old fashion (they do have JavaScript turned off after all) from a confirmation page to the real page.

The dialog markup is a simple DIV tag with the id of 'IAgree'. Inside the DIV is the actual content of the dialog the user needs to read. Do not worry if the content is long, the dialog will automatically display scroll bars as needed. The Dialog's title is derived by setting the Title attribute of the DIV element. In this case I am just saying 'Usage Terms' but you can say anything here. I do place this DIV at the bottom of my content, so it is 'out of the way' in the markup. Legally you could place it just about anywhere in your markup.

<

div

id

="IAgree"

title

="Usage Terms"

>

{Important Content Goes Here}

</

div

>

Finally, with all that done we can view the dialog. Voila, a confirmation dialog that will force the user to agree to our terms of use before using the page!

As always, the Contact Form Tester Web Site Code is available for download. The new page I added is named 'ConfirmDialog.aspx'.

Share This Article With Your Friends!