jQuery技术

JQuery boxy插件弹出框的四个边角图片在IE中不显示

字号+ 作者:jamie 来源: 2014-11-16 22:49 我要评论( )

JQuery boxy插件很好用,但也会出现一些问题,比如弹出框的边角在IE中不能显示 ,

JQuery boxy插件很好用,但也会出现一些问题,比如弹出框的边角在IE中不能显示。本文将来解决这个问题。将boxy插件引用到项目中后会有一个boxy.css文件和jquery.boxy.js文件。在boxy.css文件中有给弹出框设置四个角图片的样式,如下图:

不做任何修改在Chrome浏览器下没有问题,如下:

在网上查了一些资料,说将css文件中的图片路径给位全路径可以解决问题,如下:

发现这样修改后并没有作用,运行后效果仍然如下:

有效的解决方法

将上面css截图的下半部分注释掉,如下图:

然后在jquery.boxy.js文件中的Boxy函数中添加一段脚本,下面贴出修改后的Boxy函数代码:

function Boxy(element, options) {        this.boxy = jQuery(Boxy.WRAPPER);    jQuery.data(this.boxy[0], 'boxy', this);        this.visible = false;    this.options = jQuery.extend({}, Boxy.DEFAULTS, options || {});        if (this.options.modal) {        this.options = jQuery.extend(this.options, {center: true, draggable: false});    }        // options.actuator == DOM element that opened this boxy    // association will be automatically deleted when this boxy is remove()d    if (this.options.actuator) {        jQuery.data(this.options.actuator, 'active.boxy', this);    }        this.setContent(element || "<div></div>");    this._setupTitleBar();        this.boxy.css('display', 'none').appendTo(document.body);    this.toTop();    if (this.options.fixed) {        if (jQuery.browser.msie && jQuery.browser.version < 7) {            this.options.fixed = false; // IE6 doesn't support fixed positioning        } else {            this.boxy.addClass('fixed');        }    }        if (this.options.center && Boxy._u(this.options.x, this.options.y)) {        this.center();    } else {        this.moveTo(            Boxy._u(this.options.x) ? this.options.x : Boxy.DEFAULT_X,            Boxy._u(this.options.y) ? this.options.y : Boxy.DEFAULT_Y        );    }    //fengwei add 2010-11-28    //用于解决弹出框的圆角在ie中的显示问题    if ($.browser.msie) {        var setFilter = function(cls) {            var obj = $(cls), ret = obj.css("background-image").match(/url\(\"(.+)\"\)/);            if (ret == null || ret.length < 1) return;            obj.css({                "background": "none", "filter": "alpha(opacity=0)",                "filter": "progid:DXImageTransform.Microsoft.
                                             AlphaImageLoader(src='" + ret[1] + "')"            });        };        setFilter(".top-left");        setFilter(".top-right");        setFilter(".bottom-left");        setFilter(".bottom-right");    }        if (this.options.show) this.show();};

修改好css和js文件后,再次运行程序,在IE6,7,8中均能正常弹出带边角的框了。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评
/