In this article I will explain with an example, how to change the Text (Label) of default Buttons in jQuery UI Dialog Modal Popup box.
By default, jQuery UI Dialog Modal Popup box has only two Buttons OK and Cancel, but it has provision to add Custom Buttons.
Change Text (Label) of Buttons in 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]()
Demo
Downloads
