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
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
