jquery.jconfirm兼容IE6

最新推荐文章于 2021-11-10 09:11:37 发布

weixin_30782331

最新推荐文章于 2021-11-10 09:11:37 发布

阅读量88

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dengxi/p/7196458.html

版权

因目标用户还在大量使用IE6（想吐CAO），只能做向下兼容，但之前使用的这个插件在IE6上并不支持。所以做了些处理才行。

以下为解决方法：

IE6不支持position: fixed，所以需要对CSS进行HACK

修改如下：

.jconfirm {
    position: fixed;
    /*hack ie6*/
    _position: absolute;
    _display: block;
    _width: 100%;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999999;
    font-family: inherit;
    overflow: hidden;
}

    .jconfirm .jconfirm-bg {
        position: fixed;
         /*hack ie6*/
       _position: absolute;
        _display: block;
        _width: 100%;

        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        filter: alpha(opacity:0);
        -webkit-transition: all .4s;
        transition: all .4s;
    }

        .jconfirm .jconfirm-bg.seen {
            opacity: 1;
            filter: alpha(opacity:100);
        }

    .jconfirm .jconfirm-scrollpane {
        position: fixed;
        /*hack ie6*/
         _position: absolute;
        _display: block;
        _width: 100%;

        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
    }

另外，样式中，所有opacity:x,都添加一行filter: alpha(opacity:y);其中的值y=x*100;

然后JS也需要做些更改，需要计算高度。

        setBKHeight: function () {
            if ($.browser.msie && $.browser.version < 8) {
                var windowHeight = $(window).height();
                $(".jconfirm").height(windowHeight);
                $(".jconfirm-bg").height(windowHeight);
                $(".jconfirm-scrollpane").height(windowHeight);
            }
        },

在resize事件中添加计算高度

$(window).on('resize.' + this._rand, function () {
                that.setDialogCenter(true);
                that.setBKHeight();
            });

_buildHTML中也需要添加调用：

            if (this.closeIcon === true) {
                this.$closeButton = this.$b.find('.closeIcon').show();
            }

            this.setContent();
            this.setBKHeight();

这样就可以了。