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
|
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..
|