Simple jQuery Modal Plugin

Posted on

This is a jQuery Modal Plugin modeled after Clay’s jQuery Lightbox / Modal Plugin. I have extended the functionality slightly and added callbacks and options to it so it is customizable by someone that may not be as tech savvy.

With the script below, the overlay fades into white over .5 seconds, and a modal window slides down from the top of the screen. The same action takes place in reverse when you click the empty space.

Download the plugin

Go to my github page and download the zip archive. It includes a working example, css, and the plugin along with a compressed version. The plugin itself is only 1k in file size.
https://github.com/zackperdue/Simple-jQuery-Modal-Plugin

How to use the plugin

Just include jQuery before the modal script, then somewhere in your page you are going to want to place similar code to this:

 $('.showModal').on('click', function(e){
 
	$this = $(this);
 
	var showModal = $this.data('modal');
 
	if($this.hasClass('active'))
	{
		return false;
	}else
	{
		$this.addClass('active');
		$(showModal).modal({
							opacity: 1,
							backgroundColor: '#fff',
							scrollable: true,
							speed: 500,
							onhide: null,
							onshow: null,
							onstart: function(){},
							onfinish: function(){},
						});		
	}
 
	e.preventDefault();
});

The little script above ensures that the modal cannot be shown twice, and you wont have to duplicate code to initialize the modal on any other triggers more than once. You can add a data attribute like data-modal="#easy-modal-window" and class="modal" to use your script. Anything with a class of modal that is clicked will look for the data-modal attribute and try to find an element on the page with the same id that it specifies.

Plugin Options

3
4
5
6
7
8
9
10
11
12
var defaults = {
		opacity: 1,
		backgroundColor: '#fff',
		scrollable: true,
		speed: 500,
		onhide: null,
		onshow: null,
		onstart: function(){},
		onfinish: function(){},
	};
  • opacity: A number from 0 – 1 that specifies how visible the overlay will be. 1 being 100% solid and .5 being 50% transparent.
  • backgroundColor: Hexadecimal color code string. Default is white (‘#fff’).
  • scrollable: Should the page be scrollable behind the modal window when it is active? true or false.
  • speed: The speed in milliseconds in which the modal and overlay will fade in and out.
  • onhide: callback function allowing you to fully customize the way the modal fades away.
  • onshow: Callback function allowing you to fully customize the way the modal fades in.
  • onstart: Callback function allowing you to specify any behavior to happen before the modal shows.
  • onfinish: Callback function allowing you to specify any behavior to happen after the modal fades away.
jQuery.fn.modal = function(options){
 
	var defaults = {
		opacity: 1,
		backgroundColor: '#fff',
		scrollable: true,
		speed: 500,
		onhide: null,
		onshow: null,
		onstart: function(){},
		onfinish: function(){},
	};
 
	if(options)
	{
		$.extend(defaults, options);
	}
 
	return this.each(function(){
 
		defaults.onstart.call(this);
 
		$this = $(this);
		$window = $(window);
 
		var mh = $this.height(),
			mw = $this.width(),
			ww = $window.width(),
			wh = $window.height(),
			vp = ((wh/2)-(mh/2)) * (mh / (wh * .7)),
			hp = (ww/2)-(mw/2);
 
		if(!defaults.scrollable)
		{
			$('body')
				.height(wh)
				.css({overflow: 'hidden'});
		}	
 
		$('<div />')
			.addClass('overlay')
			.css({'backgroundColor': defaults.backgroundColor})
			.appendTo('body')
			.animate({opacity: defaults.opacity})
			.on('click', function(){
				if(jQuery.isFunction(defaults.onhide))
				{
					defaults.onhide.call(this);
				}else
				{
					$(this).animate({opacity: 0}, defaults.speed, function(){
						$(this).remove();
					});
					$('.modal:visible').animate({opacity: 0, top: -400}, defaults.speed);
					$('.showModal.active').removeClass('active');
				}
 
			});
 
		if(jQuery.isFunction(defaults.onshow)){
			defaults.onshow.call(this);
		}else
		{
			$this
			.css({
				display: 'block',  
				left: hp,
			})
			.animate({
				opacity: 1,
				top: vp,
			}, defaults.speed);
		}			
 
		defaults.onfinish.call(this);
 
	});
}

CSS to styles the modal correctly

.overlay{
	background: #fff;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 400;
	opacity: 0;
}
 
.modal{
	display: none;
	background: #990099;
	z-index: 900;
	padding: 5px;
	position: absolute;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	top: -400px;   
}

NOTICE: This plugin will not work with anything older than jQuery v1.7.

Also, a big thanks to clay for providing the original code!

  • Wayne

    Are you able to use this JQuery plugin for to different pop ups on the same page?

    • Zack

      Yeah, of course! Its pretty extendable since it has callbacks you can use to modify really any functionality of the plugin.