Wednesday, April 23, 2014

Create a custom confirm box plugin with jQuery

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); method
defaultObject = {
			'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 part

jQuery

//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);