Share

Recently on a coding project for my day job I had a requirement to display a dialog box to confirm that when someone clicked a cancel link that they meant to do the cancel action. The dialog box was on a page that built a list of links with multiple cancel links, each with a different url. Since we are using jQuery and since I didn't want a browser dialog box to display I decided to use the jQuery dialog box.

Since I am a firm believer in the first rule of programming (never re-write something that has already been written) I did a quick Google search and found a good example of the jQuery dialog box for when a form is submitted at jensbits.com. The code was close to what I wanted to do, but not exactly. So, I took the code and modified it to work for me.

Below is the portion of the jQuery code that I changed from the code in the jensbits.com post.




$(function(){
// jQuery UI Dialog

$('#dialog').dialog({
autoOpen: false,
width: 400,
modal: true,
resizable: false,
buttons: {
"Yes": function() {
$(this).dialog("close");
$(location).attr('href',$(this).dialog('option', 'anchor'));
return true;
},
"No": function() {
$(this).dialog("close");
return false;
}
}
});

$('.closebutton').click(function(){
$('#dialog').dialog('option', 'anchor', $(this).attr('href'));
$('#dialog').dialog('open');
return false;
});
});

My first modification was to have the dialog open when someone clicks on a link that has a closebutton class assigned to it. I also attached an anchor option to the dialog box that holds the href attribute value of the link.


$('.closebutton').click(function(){
$('#dialog').dialog('option', 'anchor', $(this).attr('href'));
$('#dialog').dialog('open');
return false;
});


The below code shows the setup of the buttons and the major change is that the "Yes" button sets the location attribute to the anchor option value that we set in the code above.


buttons: {
"Yes": function() {
$(this).dialog("close");
$(location).attr('href',$(this).dialog('option', 'anchor'));
return true;
},
"No": function() {
$(this).dialog("close");
return false;
}
}


Below is the code in the body of the html that sets up the links and the dialog box. Notice that each link has the class set to closebutton.




<a id="closebutton1" href="http://ocell.us" class="closebutton">Close</a><br />
<a id="closebutton2" href="http://wastingtimegames.com" class="closebutton">Close</a><br />
<a id="closebutton3" href="http://theporscheguys.com" class="closebutton">Close</a>
<div id="dialog" title="Cancel"><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span> Are you sure you want to do that?</p><p>
If you are sure, click Yes.</p><p>If not click No.<p></div>

You can see the full demo code here. It is a text file for easy code viewing, but you can save it to your computer if you want to see it in action.