Follow steps to create your jQuery confirmation dialog
and Alert dialog box.
1. Use
jQuery and jQuery UI reference files.
2. Global
master HTML div with a page element for appends and display dialog box
dynamically.
3. JavaScript confirm dialog box Yes/No and Alert dialog Ok, common methods.
4. Use of common
methods
to display jQuery confirm dialog box Yes/No and Alert dialog Ok.
I.
Alter dialog OK
II.
Confirmation Dialog Yes/No
Common
and Global HTML div for display dialog box dynamically.
@*CONFIRMATION
DIALOG BOX*@
<div
id="divAlertDialog"><p></p></div>
JavaScript confirm
dialog box yes no and Alert dialog Ok, common methods.
//#region NAMESPACE
var pm = pm || {};
//#endregion
window.pm.dialog =
window.pm.dialog || (function () {
//#region BELOW METHOD IS
USED TO SHOW CONFIRMATION DIALOG
var confirmationDialog
= function (title,
contentHeading, content, successCallBack, cancelCallBack) {
$('#divAlertDialog').dialog({
dialogClass: 'fixed-dialog-alert
sweet-alert showSweetAlert',
modal: true,
resizable: false,
draggable: false,
width: 500,
//title: "<i
class='fa fa-exclamation-triangle'></i>" + title,
title: title,
open: function (event, ui) {
$('#divAlertDialog
p').empty().html('<div
class="icon warning pulseWarning" style="display:
block;"> <span class="body
pulseWarningIns"></span> <span class="dot
pulseWarningIns"></span> </div>' + '<h2>' + contentHeading + '</h2>
<p>'
+ content + '</p>');
},
buttons: {
OK: function () {
$(this).dialog("close");
if (successCallBack
!== undefined && successCallBack !== null) {
successCallBack();
}
},
Cancel: function () {
$(this).dialog("close");
if (cancelCallBack !==
undefined && cancelCallBack !== null) {
cancelCallBack();
}
}
}
});
}
//#endregion
//#region BELOW METHOD IS
USED TO SHOW ALERT DIALOG
var alertDialog = function (type, title,
contentHeading, content, successCallBack) {
$('#divAlertDialog').dialog({
dialogClass: 'fixed-dialog-alert
sweet-alert showSweetAlert ' + type,
modal: true,
resizable: false,
draggable: false,
width: 500,
//title: "<i
class='fa fa-exclamation-triangle'></i>" + title,
title: title,
open: function (event, ui) {
if(type === 'success')
$('#divAlertDialog
p').empty().html('<div
class="icon success animate" style="display: block;">
<span class="line tip animateSuccessTip"></span> <span
class="line long animateSuccessLong"></span> <div
class="placeholder"></div> <div
class="fix"></div> </div>' + '<h2>' + contentHeading + '</h2>
<p>'
+ content + '</p>');
else if(type === 'error')
$('#divAlertDialog
p').empty().html('<div
class="icon error animateErrorIcon" style="display:
block;"><span class="x-mark animateXMark"><span
class="line left"></span><span class="line
right"></span></span></div>' + '<h2>' + contentHeading + '</h2>
<p>'
+ content + '</p>');
else if (type === 'info')
$('#divAlertDialog
p').empty().html('<div
class="icon info" style="display: block;"></div>' + '<h2>' + contentHeading + '</h2>
<p>'
+ content + '</p>');
},
buttons: {
OK: function () {
$(this).dialog("close");
if (successCallBack
!== undefined && successCallBack !== null) {
successCallBack();
}
}
}
});
}
//#endregion
return {
confirmationDialog: confirmationDialog,
alertDialog: alertDialog
}
})();
Use of common
methods
to display confirm dialog
box yes no and Alert dialog Ok.
1. Alter
dialog Ok
2. Confirmation Dialog Yes/No
Alert
dialog OK
pm.dialog.alertDialog('error', 'Error',
'Error', 'Unable to process
you’re your Request.', null);
Confirmation dialog Yes/No
pm.dialog.confirmationDialog('Warning!', 'Are you sure?', ' ',
function () { //TODO: your custom login if yes.},
null);
For more detail, you can go
link http://jqueryui.com/dialog/#modal-confirmation