In this article I will explain with an example, how to use and show Custom Buttons with jQuery UI Dialog Modal Popup box.
This article will also explain how to attach event handlers to the Custom Buttons inside the jQuery UI Dialog Modal Popup box.
Using Custom Buttons with jQuery UI Dialog Modal Popup
The following HTML Markup consists of jQuery UI Script and CSS files inherited to use jQuery UI Dialog Modal Popup box and an HTML DIV.
Inside the jQuery document ready event handler, the jQuery UI Dialog Modal Popup box is initialized.
Using the buttons property of the jQuery UI Dialog, Custom Buttons can be easily added. In the below markup, two Custom Buttons i.e. Delete and Cancel have been assigned to the jQuery UI Dialog.
Each Custom Button is assigned an ID, Text and a Click event handler.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
modal: true,
title: "Confirmation",
width: 350,
height: 160,
buttons: [
{
id: "Delete",
text: "Delete",
click: function () {
alert("Delete clicked.");
}
},
{
id: "Cancel",
text: "Cancel",
click: function () {
$(this).dialog('close');
}
}
]
});
});
</script>
<div id="dialog" style="display: none" align="center">
Do you want to delete this record?
</div>
Screenshot
![jQuery UI Dialog Modal Popup Custom Buttons example]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
