In this article I will explain with an example, how to add multiple Buttons to jQuery UI Dialog Modal Popup box.
The jQuery UI Dialog Modal Popup box has provision to add multiple custom Buttons using the Buttons property.
Add Multiple Buttons to 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
![Change Text (Label) of Buttons in jQuery UI Dialog Modal Popup]()
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
