Skip to content

Instantly share code, notes, and snippets.

@jdp
Created December 9, 2008 21:47
Show Gist options
  • Save jdp/34105 to your computer and use it in GitHub Desktop.
Save jdp/34105 to your computer and use it in GitHub Desktop.
A simple way to make a centered layer with jQuery
/*
* jQuery jquery.layer.js
* Copyright (c) 2008 Justin Poliey <jdp34@njit.edu>
* A simple inline layer function for jQuery
*
* Permission to use, copy, modify, and/or distribute this software for any
* purpose with or without fee is hereby granted, provided that the above
* copyright notice and this permission notice appear in all copies.
*
* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
* WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
* ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
* WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
* ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
* OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
*/
jQuery.layer = function() {
/* Take care of function arguments */
options = arguments[0] ? arguments[0] : {};
settings = jQuery.extend({
'id' : '',
'width' : 'default',
'height' : 'default',
'content' : '<div></div>',
'bgcolor' : '#000000',
'opacity' : '0.5'
}, options);
/* Create a jQuery object of the layer */
layer = {};
if (settings.id != '') {
layer = jQuery('#' + settings.id).addClass('layer').hide();
if (!layer.length) {
return;
}
}
else {
content = (settings.content.constructor == Array) ? settings.content.join('') : settings.content;
layer = jQuery(content).addClass('layer').appendTo('body').hide();
}
old_height = layer.height();
old_width = layer.width();
settings.height = (settings.height == 'default') ? layer.height() : settings.height;
settings.width = (settings.width == 'default') ? layer.width() : settings.width;
/* Fade the screen to black (or any other color) */
jQuery('<div></div>').css({
'position' : 'absolute',
'top' : '0',
'left' : '0',
'width' : jQuery(window).width(),
'height' : jQuery(window).height(),
'z-index' : '1',
'background-color' : settings.bgcolor,
'opacity' : settings.opacity
}).addClass('layer-bg').appendTo('body').hide().fadeIn();
/* Resize the window nicely */
jQuery(window).resize(function () {
jQuery('.layer-bg').css({
'width' : jQuery(window).width(),
'height' : jQuery(window).height()
});
jQuery('.layer').css({
'top' : jQuery(window).height()/2 - settings.height/2,
'left' : jQuery(window).width()/2 - settings.width/2
});
});
/* Pop up the layer! */
layer.css({
'overflow' : 'hidden',
'position' : 'absolute',
'width' : settings.width + 'px',
'height' : settings.height + 'px',
'top' : jQuery(window).height()/2 - settings.height/2,
'left' : jQuery(window).width()/2 - settings.width/2,
'z-index' : '2'
}).fadeIn('normal', function() {
jQuery('.layer-bg').click(function () {
(settings.id != '') ? layer.width(old_width).height(old_height).hide() : layer.remove();
jQuery('.layer-bg').unbind('click').remove();
jQuery(window).unbind('resize');
});
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment