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 form 验证函数 弹出对话框形式
Jun 23 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
vue登录路由验证的实现
Dec 13 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
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解压文件代码实现php在线解压
2014/02/13 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
Python中的choice()方法使用详解
2015/05/15 Python
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
python实现udp传输图片功能
2020/03/20 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
劳动工资科岗位职责范本
2014/03/02 职场文书
集中采购方案
2014/06/10 职场文书
地震捐款倡议书
2014/08/29 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
资金申请报告范文
2015/05/14 职场文书
党员证明模板
2015/06/19 职场文书