Hey guyz sorry for the late post i was busy with girls hahaha but now i am back to my best girlfriend my computer. In this post i am going to show u how to create and use a confirm box plugin with jQuery so get started.
View demo
Download
Get the Latest version from GitHub
Markup of confirm box
markup is simple we have a <section> with class of .confirm-container inside we have 3 <div> of header, body, and footer
<section class="confirm-container"> <div class="confirm-h"> <span><!--confirm box headline--><span> <button class="close">x</button> </div> <div class="confirm-b"> <p><!--confirm box message--></p> </div> <div class="confirm-f"> <button id="cancel-btn" class="btn btn-grey">Cancel</button> <button class="btn btn-blue" id="function-btn">Ok</button> </div> </section>
css
body{
margin: 0;
padding: 0;
}
#container{
height: 700px;
width: 600px;
border: 1px solid rgba(0, 0, 0, 0.5);
margin: 0 auto;
padding: 10px;
}
h2{
font-family: arial;
}
.overlay{
display: none;
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #555;
opacity: 0.5;
z-index: 10;
}
.confirm-container{
display: none;
position: fixed;
background: #fafbfb;
height: 200px;
width: 500px;
border-radius: 10px;
box-shadow: 2px 2px 15px #555;
z-index: 15;
}
.confirm-h{
padding: 5px;
height: 30px;
border-bottom: 1px solid #ccc;
}
.confirm-h > span{
font-family: arial;
font-weight: 400;
font-size: 20px;
}
.confirm-h .close{
float: right;
border: 0px;
background: transparent;
font-size: 15px;
font-weight: bold;
margin: 5px;
opacity: 0.6;
outline: none;
}
.confirm-h .close:hover{
cursor: pointer;
opacity: 1;
}
.confirm-b{
padding: 5px;
font-family: arial;
height: 110px;
border-bottom: 1px solid #ccc;
}
.confirm-b > p{
margin: 0;
padding: 0;
}
.confirm-f{
float: right;
padding: 3px;
}
/*style for buttons*/
.btn{
display: inline-block;
font-weight: 400;
text-align: center;
background: #fafbfb;
border:0;
padding: 3px 6px;
line-height: 1.5;
font-size: 14px;I
border-radius: 5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
text-decoration: none;
color: black;
cursor: pointer;
font-family: verdana;
outline: none;
}
.btn-grey{
background: #fafbfb;
border: 1px solid #ccc;
box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
-moz-box-shadow: 1px 1px 2px #ccc;
}
.btn-grey:hover{
box-shadow: inset 1px 1px 2px #ccc;
-webkit-box-shadow: inset 1px 1px 2px #ccc;
-moz-box-shadow: inset 1px 1px 2px #ccc;
cursor: pointer;
}
.btn-blue{
background: #4c66a4;
border: 1px solid #445C94;
color: #fff;
box-shadow: 1px 1px 2px #7085B6;
-webkit-box-shadow: 1px 1px 2px #7085B6;
-moz-box-shadow: 1px 1px 2px #7085B6;
}
.btn-blue:hover{
box-shadow: inset 1px 1px 2px #7085B6;
-webkit-box-shadow: inset 1px 1px 2px #7085B6;
-moz-box-shadow: inset 1px 1px 2px #7085B6;
}
Create a jQuery plugin
I will show u how to create a jQuery plugin but for making it easy i will brake this process in 4 or 5 parts.1. Define a jQuery plugin
//define a plugin function
(function($){
//give a name to the plugin
$.fn.confirm = function(userObject,callbackFunction){
}
}) (jQuery);
2. mergin the user object to the default object
Mergin of objects in important if u want some information for the user like message or headline etc for this we will use $.extend(object1,object2); methoddefaultObject = {
'headline': 'Confirm Box',
'message': 'Are you sure'
};
//merging the content of the userObject in to default object
var option = $.extend(defaultObject, userObject);
3. Inserting the the confirm box markup dynamiclay to the DOM (page)
var markup = '<div class="confirm-h">
<button class="close">x</button></div>
<div class="confirm-b">
</div>
<div class="confirm-f">
<button class="btn btn-grey" id="cancel-btn">Cancel</button><button class="btn btn-blue" id="function-btn">Ok</button></div>
',
$this = $(this);
//create a overlay div
var createOverlay = '<div class="overlay">
</div>
';
$(createOverlay).appendTo('body');
//add confirm box class to the div
$this.addClass('confirm-container');
//append markup to the confirm box
$(markup).appendTo($this);
4. making a reference variable
//list header footer and body in variables
var headerTitle = $('.confirm-h span',$this),
closeBtn = $('.confirm-h button.close', $this),
body = $('.confirm-b p',$this),
cancelBtn = $('.confirm-f #cancel-btn', $this),
okBtn = $('.confirm-f #function-btn', $this),
windowW = $(document).width(),
windowH = $(document).height(),
boxW = $this.width(),
boxH = $this.height(),
overlay = $('.overlay');
4. Final touch UP
in this part we will create a closeBox() function and give work to every element of the confirm box an finaly show the box//close box function
function closeBox(){
$this.slideUp(500);
overlay.fadeOut();
$this.removeClass("confirm-container");
$this.html('');
}
headerTitle.text(option.headline);
body.text(option.message);
okBtn.click(callbackFunction);
cancelBtn.click(closeBox(););
closeBtn.click(closeBox(););
//center the box
$this.css('left', (windowW/2) - (boxW/2)).css('top', '150px');
//show the box and overlay
overlay.fadeIn();
$this.slideDown(500);
Putting it all together
html
<!DOCTYPE html>
<html>
<head>
<title>Custom conform box</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<h2>Custom Confirm box by hunklessons.blogspot.com</h2>
<button id="launchConfirm">Launch confirm box</button>
<div id="hello"></div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="alert.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//lauch confirm box
$('#launchConfirm').click(function(){
$('#hello').confirm({
'headline': 'Alert box by hunklessons',
'message': 'Are you husain saify'
},function(){
alert('This is a callback function');
});
});
});
</script>
</body>
</head>
</html>
Css
We have dicused the css in the above partjQuery
//plugin for custom confirm
(function($){
//confirm version 1.0
$.fn.confirm = function(userObject,callbackFunction){
defaultObject = {
'headline': 'Confirm Box',
'message': 'Are you sure'
};
//merging the content of the userObject in to default object
var option = $.extend(defaultObject, userObject);
var markup = '<div class="confirm-h"><span></span><button class="close">x</button></div><div class="confirm-b"><p></p></div><div class="confirm-f"><button id="cancel-btn" class="btn btn-grey">Cancel</button><button class="btn btn-blue" id="function-btn">Ok</button></div>',
$this = $(this);
//create a overlay div
var createOverlay = '<div class="overlay"></div>';
$(createOverlay).appendTo('body');
//add confirm box class to the div
$this.addClass('confirm-container');
//append markup to the confirm box
$(markup).appendTo($this);
//list header footer and body in variables
var headerTitle = $('.confirm-h span',$this),
closeBtn = $('.confirm-h button.close', $this),
body = $('.confirm-b p',$this),
cancelBtn = $('.confirm-f #cancel-btn', $this),
okBtn = $('.confirm-f #function-btn', $this),
windowW = $(document).width(),
windowH = $(document).height(),
boxW = $this.width(),
boxH = $this.height(),
overlay = $('.overlay');
//close box function
function closeBox(){
$this.slideUp(500);
overlay.fadeOut();
$this.removeClass("confirm-container");
$this.html('');
}
headerTitle.text(option.headline);
body.text(option.message);
okBtn.click(callbackFunction);
cancelBtn.click(closeBox(););
closeBtn.click(closeBox(););
//center the box
$this.css('left', (windowW/2) - (boxW/2)).css('top', '150px');
//show the box and overlay
overlay.fadeIn();
$this.slideDown(500);
}
}) (jQuery);
No comments:
Post a Comment