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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
JavaScript URL参数读取改进版
Jan 16 Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
jQuery中removeProp()方法用法实例
Jan 05 Javascript
javascript字符串函数汇总
Dec 06 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
如何使用JavaScript实现栈与队列
Jun 24 Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
用Angular实现一个扫雷的游戏示例
May 15 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
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
php中文验证码实现示例分享
2014/01/12 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
详解js异步文件加载器
2016/01/24 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
详解jQuery选择器
2016/12/21 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
python 内置函数汇总详解
2019/09/16 Python
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
展会邀请函范文
2014/01/26 职场文书
请假条格式范文
2014/04/10 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
干部考核工作总结
2015/08/12 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python
 Python 中 logging 模块使用详情
2022/03/03 Python
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏