写一个jquery弹出层插件gbox，简单多功能...

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

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

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

; (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 = $('<div></div>').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; 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//关闭时执行函数

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