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]