JQuery boxy插件在IE中边角图片不显示问题的解决


Posted in Javascript onMay 20, 2015

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

JQuery boxy插件在IE中边角图片不显示问题的解决

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

JQuery boxy插件在IE中边角图片不显示问题的解决

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

JQuery boxy插件在IE中边角图片不显示问题的解决

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

JQuery boxy插件在IE中边角图片不显示问题的解决

有效的解决方法

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

JQuery boxy插件在IE中边角图片不显示问题的解决

然后在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中均能正常弹出带边角的框了。

希望本文对您有所帮助。

Javascript 相关文章推荐
Javascript学习笔记一 之 数据类型
Dec 15 Javascript
javascript 原型继承介绍
Aug 30 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 Javascript
JS中的Replace方法使用经验分享
May 20 #Javascript
jquery使用经验小结
May 20 #Javascript
js实现字符串转日期格式的方法
May 20 #Javascript
JavaScript实现带标题的图片轮播特效
May 20 #Javascript
手机端页面rem宽度自适应脚本
May 20 #Javascript
jquery实现弹出层效果实例
May 19 #Javascript
jQuery结合ajax实现动态加载文本内容
May 19 #Javascript
You might like
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
读jQuery之五(取DOM元素)
2011/06/20 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
举例讲解Python中is和id的用法
2015/04/03 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
详解Python locals()的陷阱
2019/03/26 Python
Python中的延迟绑定原理详解
2019/10/11 Python
keras:model.compile损失函数的用法
2020/07/01 Python
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
酒店管理求职信
2014/06/09 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
自荐信怎么写
2015/03/04 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技