用来处理HTML页面弹出框的jQuery插件

最近站长Tony开发了一个jquery.pop.js插件,这是一个用来处理弹出框的jQuery插件,目的是为了兼容IE6浏览器,从此不用不用为了IE6写CSS hack了,现代浏览器的fix和absolute怎么写就怎么写,无需考虑IE6一样兼容。值得注意的是jquery版本要求是1.3到1.8,HTML声明请遵循W3C标准。

使用方法:

$('#loginBox').popup();
$('#loginBox').pophide();

以上是弹出框的弹出和隐藏。

$('#loginBox').popup({
filter : '#filter'
});
$('#loginBox').pophide({
filter : '#filter'
});

如果添加了参数filter,表示弹出的同时开启滤镜,关闭的时候关闭滤镜。filter传入的值和你想要填写的选择器的内容是一样的。

demo地址:http://www.tonitech.com/demo/jquery.pop.js

jquery.pop.js插件的代码如下:

//@charset "utf-8";
/**
 * jquery版本要求:1.3 ~ 1.8,HTML声明请遵循W3C标准
 * 用来处理弹出框的jQuery插件
 * 兼容IE6浏览器,从此您再也不用担心IE6的弹框
 * 不用写css hack,否则会出问题,现代浏览器怎么写就怎么写
 * @author wangzhiangtony@qq.com
 * @version 1.2
 * @date 2013-3-27 10:09:59
 */
(function($) {
    //弹出的窗口处于屏幕中间
    $.fn.popup = function(opts) {
        var defaults = {
            filter : ''
        };
        var options = $.extend(defaults, opts);

        if(defaults.filter != '') {
            var maskHeight = $('body').height();
            $(options.filter).css('height', maskHeight);
            $(options.filter).show();
        }
        var str = $(this);

        var pos = str.css('position');
        if(pos == 'fixed') {
            var top = ($(window).height() - str.height()) / 2;
            //fix兼容ie6
            if($.browser.msie && $.browser.version == "6.0") {
                str.css('position', 'absolute');
                var dom = str[0];
                $('body').css({
                    'background-image' : 'url(about:blank)',
                    'background-attachment' : 'fixed'
                });
                dom.style.setExpression('top', 'eval((document.documentElement.scrollTop)+' + top + ')');
            }
        } else {
            var top = $(window).scrollTop() + ($(window).height() - str.height()) / 2;
        }
        if(top > 0) {
            str.css('top', top);
        } else {
            str.css('top', 0);
        }

        var width = $(window).width();
        var left = (width - str.width()) / 2;
        if(left > 0) {
            str.css('left', left);
        } else {
            str.css('left', 0);
        }
        str.css('z-index', '1000');
        str.show();
    };

    $.fn.pophide = function(opts) {
        var defaults = {
            filter : ''
        };
        var options = $.extend(defaults, opts);

        if(defaults.filter != '') {
            $(options.filter).hide();
        }
        $(this).hide();
    };
})(jQuery);

demo下载地址:jquery.pop.js (457)

 

Tonitech版权所有 | 转载请注明出处: http://www.tonitech.com/2048.html

发表评论