Hello everyone, I am going to share the custom confirm dialog box using jQuery dialog as given below in detail.
//Begin: Open Add dialog for
Add Address scripts
modal: true,
title: "Edit Timer",
width: 620,
height: 420,
resizable: false,
open: function (event, ui) {
$('body').addClass('stop-scrolling');
},
close: function (event, ui) {
$('body').removeClass('stop-scrolling');
}
});
//End
The HTML
code sample as given below
<div class="row clearfix
addressChecker"
id="editTimer">
<div class="col
col_4">
Address1 : <input type="text" id="Address1" name="Address1" />
</div>
<div class="col
col_5">
Address2 : <input type="text" id="Address2" name="Address2" />
</div>
<div class="col
col_3">
<div class="actions">
<button type="submit" class="btn yellow
center"
onclick="addBillAddress()">
Add
</button>
</div>
</div>
</div>
The output: look-like below image
The output: look-like below image
Other one examples for custom alert and confirmation dialog, you can see the below code.
//#region UNDERLYING METHODS
ARE USED TO SHOW THE CUSTOM ALERT AND CONFIRMATION DIALOGS
function
showAlertDialog(title, content) {
$('#divAlertDialog').dialog({
modal: true,
resizable: false,
width: 600,
title: title,
open: function (event, ui) {
$('#divAlertDialog p').html(content);
},
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
}
function
showConfirmationDialog(title, content, successCallBack) {
$('#divAlertDialog').dialog({
modal: true,
resizable: false,
width: 600,
title: title,
open: function (event, ui) {
$('#divAlertDialog p').html(content);
},
buttons: {
"OK": successCallBack,
Cancel: function () {
$(this).dialog("close");
}
}
});
}
//#endregion