由于在公司经常写一些弹出层功能，且需求不同需要找不同插件...有时需要改动也有很多不便...

所以自己写了一个弹出层插件，更多的是自己操作...

插件代码如下，不足或更通用写法还望指教...

; (function($) {
        $.fn.gbox = function(options) {
    var _options = this.options = {
                'fixed': true, //是否相对视窗定位             'fleft': 0,             'ftop': 0,             'fright': 0,             'fbottom': 0,             'lay': true, //是否有遮罩层             'center': true,             'box': null,             'closeBox': null,             'backgroundColor': '#000',             'opacity': 50,             'zIndex': 1000,             'isIE6': $.browser.msie && $.browser.version == '6.0',             'onShow': $.noop,             'onClose': $.noop         };         $.extend(_options, options || {}); if (_options.lay) {
    var _lay = this.lay = $('
      
').css({
                    'display': 'none',                 'position': _options.fixed ? 'fixed' : 'absolute',                 'left': 0, 'top': 0,                 'width': '100%', 'height': '100%',                 'zIndex': _options.zIndex,                 'background-color': _options.backgroundColor,                 'opacity': _options.opacity / 100,                 'filter': 'alpha(opacity=' + _options.opacity + ')'             });             $('body').append(_lay);         } this.css({
                'zIndex': _options.zIndex + 1,             'position': _options.fixed ? 'fixed' : 'absolute',             'display': 'none'         }); //兼容ie6的处理 因为ie6不支持fixed全部变回absolute         var that = this; if (_options.isIE6) {
                that.css({ 'position': 'absolute' }); if (_lay) {
                    _lay.css({
                        'position': 'absolute',                     'width': $(document).width(),                     'height': $(document).height()                 });             }             that._fixed = function() {
    if (_options.center) setCenter(); else setFixed();             }             that._resize = function() {
    if (_options.center) setCenter(); else setFixed();             }         } //显示弹出层         $(_options.box).click(function() {
                that.show();             _lay && _lay.show(); if (_options.fixed) {
    if (_options.center) {
                        setCenter();                 } else {
    if (_options.fright) {
                            that.css({ 'right': _options.fright, 'bottom': _options.fbottom });                     } else {
                            that.css({ 'left': _options.fleft, 'top': _options.ftop });                     }                 } if (_options.isIE6) {
                        $('select').css('visibility', 'hidden');                     $(window).resize(that._resize).scroll(that._fixed);                 }             } else {
    var p = $(this).offset(),                             w = p.left + $(this).width(),                             h = p.top + $(this).height();                 that.css({ 'left': w, 'top': h });             }             _options.onShow();         }); //关闭弹出层         $(_options.closeBox).click(function() {
                that.hide();             _lay && _lay.hide(); if (_options.fixed) {
    if (_options.isIE6) {
                        $('select').css('visibility', 'visible');                     $(window).remove('resize scroll')                 }             }             _options.onClose();         }); function setCenter() {
                that.css({
                    'top': '50%', 'left': '50%',                 'marginTop': $(document).scrollTop() - that.height() / 2 + "px",                 'marginLeft': $(document).scrollLeft() - that.width() / 2 + "px"             });         } function setFixed() {
    if (_options.fright) {
                    that.css({
                        'right': _options.fright + $(document).scrollLeft(),                     'bottom': _options.fbottom + $(document).scrollTop()                 });             } else {
                    that.css({
                        'left': _options.fleft + $(document).scrollLeft(),                     'top': _options.ftop + $(document).scrollTop()                 });             }         } return this     } })(jQuery);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="jquery-1.4.4.js" type="text/javascript"></script>

<script type="text/javascript" src="gbox.js"></script>

<script>

$(function() {

$("#sd").gbox({

'box': '#ygm',

'closeBox': '#clo'

});

});

</script>

</head>

<body style="height: 1000px;">

<div id="sd" style="height: 200px; width: 300px; border: 5px solid #000; background-color: #fff">

<div id="clo" style="background-color: Gray; height: 30px; line-height: 30px">

title</div>

<div>

content

</div>

</div>

<input id="ygm" value="text" type="button" />

</body>

</html>

如上调用即可...

参数说明

'fixed': true, //是否相对视窗定位

'fleft': 0,　　//非居中定位时的上下左右值

'ftop': 0,

'fright': 0,

'fbottom': 0,

'lay': true, //是否有遮罩层

'center': true,//是否居中

'box': null,//触发弹出层元素

'closeBox': null,//关闭弹出曾元素

'backgroundColor': '#000',

'opacity': 50,

'zIndex': 1000,

'isIE6': $.browser.msie && $.browser.version == '6.0',

'onShow': $.noop,//显示时执行函数

'onClose': $.noop//关闭时执行函数

以上均为默认值...实际操作自己传参覆盖即可...具体能干什么 自己挖掘,扩展..