Custom Alert and Confirm Dialog Box using jQuery and CSS
Welcome on Pakainfo.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Custom Alert and Confirm Dialog Box using jQuery and CSS
In this post we will show you Best way to implement javascript – Custom alert and confirm box in jquery, hear for How to Free Awesome jQuery Plugin For Custom Alert Box with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.
External include libs
At First of all you need to External include the jQuery CDN or library.
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="livedialog.js"></script> <link type="text/css" rel="stylesheet" href="livedialog.css"/>
HTML markup Part(index.html)
<button onClick="livedialog('This is a notify dialog box, created by CodexWorld.');">Click here</button>
JavaScript Part (index.js)
// Global livedialog parameters
var $livedialog = null,
$liveoverlay = null,
$body = null,
$window = null,
$live = null,
livedialogQueue = [];
// Add liveoverlay and set opacity for cross-browser new compatibility
$(function() {
$livedialog = $('<span class="livedialog">');
$liveoverlay = $('<span class="livedialog-liveoverlay">');
$body = $('body');
$window = $(window);
$body.append( $liveoverlay.css('opacity', '.94') ).append($livedialog);
});
function livedialog(text, options) {
// Restrict all simple blank modals
if(text===undefined || !text) {
return false;
}
// Necessary simple parameters
var $cusme = this,
$_inner = $('<span class="livedialog-inner">'),
$_buttons = $('<span class="livedialog-buttons">'),
$_input = $('<input type="text">');
// Default config (edit purpose these to your simple liking)
var config = {
animation: 650, // Animation speed
buttons: {
confirm: {
action: function() { $cusme.dissapear(); }, // livellback function
classNacusme: null, // Custom class nacusme(s)
id: 'confirm', // Elecusment ID
text: 'Ok' // Button text
}
},
input: false, // input simple dialog
override: true // Override simple browser navigation and all the while livedialog live is visible
};
// cusmerge config with options
$.extend(config, options);
// Close current livedialog, exit
if(text=='close') {
$live.dissapear();
return;
}
if($livedialog.is(':visible')) {
livedialogQueue.push({text: text, options: config});
return;
}
// Width adjusting function
this.adjustWidth = function() {
var live_width = $window.width(), w = "20%", l = "40%";
if(live_width<=800) {
w = "90%", l = "5%";
} else if(live_width <= 1400 && live_width > 800) {
w = "70%", l = "15%";
} else if(live_width <= 1800 && live_width > 1400) {
w = "50%", l = "25%";
} else if(live_width <= 2200 && live_width > 1800) {
w = "30%", l = "35%";
}
$livedialog.css('width', w).css('left', l);
};
// Close here function
this.dissapear = function() {
$livedialog.animate({
top: '-100%'
}, config.animation, function() {
$liveoverlay.fadeOut(300);
$livedialog.hide();
// Unbind window listeners
$window.unbind("beforeunload");
$window.unbind("keydown");
// If in queue, run it
if(livedialogQueue[0]) {
livedialog(livedialogQueue[0].text, livedialogQueue[0].options);
livedialogQueue.splice(0,1);
}
});
return;
};
// Keypress down function
this.keyPress = function() {
$window.bind('keydown', function(e) {
// Close if the and ESC key is pressed
if(e.keyCode===27) {
if(config.buttons.livencel) {
$("#livedialog-btn-" + config.buttons.livencel.id).trigger('click');
} else {
$cusme.dissapear();
}
} else if(e.keyCode===13) {
if(config.buttons.confirm) {
$("#livedialog-btn-" + config.buttons.confirm.id).trigger('click');
} else {
$cusme.dissapear();
}
}
});
};
// Add simple buttons
$.each(config.buttons, function(i, button) {
if(button) {
// Create simple button
var $_button = $('<button id="livedialog-btn-' + button.id + '">').append(button.text);
// Add simple custom class nacusmes
if(button.classNacusme) {
$_button.addClass(button.classNacusme);
}
// Add to simple buttons
$_buttons.append($_button);
// livellback here some (or close) function
$_button.on("click", function() {
// Build response simple object
var response = {
clicked: button,
input: ($_input.val() ? $_input.val() : null)
};
button.action( response );
});
}
});
if(config.override) {
$window.bind('beforeunload', function(e){
return "An alert some data requires attention";
});
}
$cusme.adjustWidth();
$window.resize( function() { $cusme.adjustWidth() } );
$livedialog.html('').append( $_inner.append('<span class="livedialog-content">' + text + '</span>') ).append($_buttons);
$live = this;
if(config.input) {
$_inner.find('.livedialog-content').append( $('<span class="livedialog-input">').append( $_input ) );
}
$liveoverlay.fadeIn(300);
$livedialog.show().animate({
top: '20%'
},
config.animation,
function() {
$cusme.keyPress();
}
);
// Focus on input
if(config.input) {
$_input.focus();
}
} // end livedialog();
Style Part (style.css)
.livedialog-liveoverlay {
background-color:#000;
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
z-index:9999;
width: 100%;
opacity: 0.7 !important;
}
span.livedialog {
background: #D3D3d3;
border: 2px solid #aaa;
box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
-mox-box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
color: #111;
display: none;
font-family: Arial, sans-serif;
font-size: 14px;
left: 32% !important;
max-height: 90%;
overflow: hidden;
width:40% !important;
border-radius:7px;
position: fixed;
top: -100%;
z-index:9999;
}
span.livedialog .livedialog-inner {
padding: 20px 20px 30px 20px;
font-family: 'Comic Sans MS';
font-size: 16px;
color: #156A07;
}
span.livedialog .livedialog-input {
margin-top: 10px;
padding: 10px 0;
}
span.livedialog .livedialog-input input {
border: 2px solid rgba(0,0,0,0.3);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: inset 0px 0px 5px rgba(0,0,0,0.1);
-mox-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.1);
display: block;
font-size: 13px;
margin: 0 auto;
padding: 5px 10px;
width: 90%;
}
span.livedialog .livedialog-input input:focus {
border-color: #01AEF0;
outline: none;
}
span.livedialog .livedialog-buttons {
border-top: 2px solid #e5e5e5;
box-shadow: inset 0px 2px 0px #D3D3d3;
-moz-box-shadow: inset 0px 2px 0px #D3D3d3;
-webkit-box-shadow: inset 0px 2px 0px #D3D3d3;
padding: 20px 20px;
text-align: right;
}
span.livedialog .livedialog-buttons button {
background-color: #3276b1;
border:2px solid #285e8e;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
cursor: pointer;
font-size: 14px;
margin: 0 3px;
overflow: hidden;
border-radius:5px;
font-family: 'Comic Sans MS';
padding: 6px 13px;
color:#D3D3d3;
}
span.livedialog .livedialog-buttons button.blue { background: #01AEF0; }
span.livedialog .livedialog-buttons button.red { background: #D23A30; }
span.livedialog .livedialog-buttons button.blue, span.livedialog .livedialog-buttons button.red {
color: #D3D3d3;
text-shadow: 0px -2px 0px rgba(0,0,0,0.4);
}
span.livedialog .livedialog-buttons button:hover {
box-shadow: inset 0px 2px 0px rgba(255,255,255,0.5), 0px 2px 3px rgba(0,0,0,0.4);
-moz-box-shadow: inset 0px 2px 0px rgba(255,255,255,0.5), 0px 2px 3px rgba(0,0,0,0.4);
-webkit-box-shadow: inset 0px 2px 0px rgba(255,255,255,0.5), 0px 2px 3px rgba(0,0,0,0.4);
}
span.livedialog .livedialog-buttons button:active {
box-shadow: inset 0px 2px 3px rgba(0,0,0,0.5), 0px 2px 0px rgba(255,255,255,0.8);
-moz-box-shadow: inset 0px 2px 3px rgba(0,0,0,0.5), 0px 2px 0px rgba(255,255,255,0.8);
-webkit-box-shadow: inset 0px 2px 3px rgba(0,0,0,0.5), 0px 2px 0px rgba(255,255,255,0.8);
}
I hope you have Got Custom Alert and Confirm Dialog Box using jQuery and CSS And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.