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 学习笔记 Black.Caffeine 09.11.28
Nov 30 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
javascript基础语法学习笔记
Jan 04 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 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 显示指定路径下的图片
2009/10/29 PHP
PHP Include文件实例讲解
2019/02/15 PHP
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
深入探讨前端框架react
2015/12/09 Javascript
详解javascript高级定时器
2015/12/31 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
使用python装饰器验证配置文件示例
2014/02/24 Python
Python多线程编程(一):threading模块综述
2015/04/05 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
Python range与enumerate函数区别解析
2020/02/28 Python
Django ModelForm操作及验证方式
2020/03/30 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
大一学生假期实习的自我评价
2013/10/12 职场文书
物理研修随笔感言
2014/02/14 职场文书
实习协议书范本
2014/04/22 职场文书
施工工地安全标语
2014/06/07 职场文书
化验室岗位职责
2015/02/14 职场文书
产品调价通知函
2015/04/20 职场文书
重阳节活动主持词
2015/07/04 职场文书
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server