This is a very simple popup plugin with jQuery. As I am a newbie, so this is for newbies. Hope it can reduce their pressure.
Special thanks goes to:
Anjan Bhowmik Da
Adrián Mato Gondelle
HTML Code:
[html]
[/code]
In head tag:
[code lang=â€htmlâ€]
[/html]
CSS Code:
[css]
.backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
.popupBox{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
border:10px solid #666;
border-radius:10px;
z-index:200;
}
.popupBoxClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
cursor:pointer;
}
[/css]
Plugin code:
[javascript]
(function($) {
$.fn.jPopup = function(options)
{
var settings =
{
‘className’: ‘popup’
};
var popStatus = 0;
var methods =
{
loadPopup: function(obj)
{
var jId = obj.attr(‘href’);
if(popStatus == 0)
{
$(jId).append(‘
‘);
$(jId+†.backgroundPopupâ€).css({“opacityâ€: “0.5â€});
$(jId+†.backgroundPopupâ€).fadeIn(“slowâ€);
$(jId+†.popupBoxâ€).css(‘width’, $(jId+†.popupBox div:first-childâ€)
.width()).append(‘X‘)
.fadeIn(“slowâ€);
popupStatus = 1;
}
},
disablePopup: function(obj)
{
var jId = obj.attr(‘href’);
$(“.popupBoxClose, .backgroundPopupâ€).live(‘click’, function() {
$(jId+†.popupBoxâ€).fadeOut(“slowâ€);
$(jId+†.backgroundPopupâ€).remove();
$(jId+†.popupBoxCloseâ€).remove();
popupStatus = 0;
});
},
centerPopup: function(obj)
{
var jId = obj.attr(‘href’);
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var popupHeight = $(jId+†.popupBoxâ€).height();
var popupWidth = $(jId+†.popupBoxâ€).width();
//centering
$(jId+†.popupBoxâ€).css({
“positionâ€: “absoluteâ€,
“topâ€: windowHeight/2-popupHeight/2,
“leftâ€: windowWidth/2-popupWidth/2
});
//only need force for IE6
$(jId+†.backgroundPopupâ€).css({“heightâ€: windowHeight});
},
showPopup: function(obj)
{
obj.bind(‘click’, function() {
methods.loadPopup(obj);
methods.centerPopup(obj);
return false;
});
}
};
return this.each(function() {
if(options) $.extend(settings, options);
methods.showPopup($(this));
methods.disablePopup($(this));
});
};
})(jQuery);
[/javascript]
Call in HEAD section in html:
[html]
//
*{margin:0; padding:0;}
body{font:11px/15px arial;}
#test{width:500px; background:#CCC}
.test-pad{padding:15px;}
h3, p{margin-bottom:10px;}
#popup-test{margin:150px auto 0; text-align:center}
[/html]