JQuery boxy插件在IE中边角图片不显示问题的解决
2015-05-20 00:00
671 查看
JQuery boxy插件很好用,但也会出现一些问题,比如弹出框的边角在IE中不能显示。本博文将来解决这个问题。将boxy插件引用到项目中后会有一个boxy.css文件和jquery.boxy.js文件。在boxy.css文件中有给弹出框设置四个角图片的样式,如下图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/69cd539fc85fe311a982adfffde40165.png)
不做任何修改在Chrome浏览器下没有问题,如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/a2989da21585befd19caa809e795b9ed.png)
在网上查了一些资料,说将css文件中的图片路径给位全路径可以解决问题,如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/796e8bfcf94933dfd21cbfb024e3a5b5.png)
发现这样修改后并没有作用,运行后效果仍然如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/8edaa6290004cddbb6d87a964999be3c.png)
有效的解决方法
将上面css截图的下半部分注释掉,如下图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/a528c34d32dede6e28fbdfd99c068e78.png)
然后在jquery.boxy.js文件中的Boxy函数中添加一段脚本,下面贴出修改后的Boxy函数代码:
修改好css和js文件后,再次运行程序,在IE6,7,8中均能正常弹出带边角的框了。
希望本文对您有所帮助。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/69cd539fc85fe311a982adfffde40165.png)
不做任何修改在Chrome浏览器下没有问题,如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/a2989da21585befd19caa809e795b9ed.png)
在网上查了一些资料,说将css文件中的图片路径给位全路径可以解决问题,如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/796e8bfcf94933dfd21cbfb024e3a5b5.png)
发现这样修改后并没有作用,运行后效果仍然如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/8edaa6290004cddbb6d87a964999be3c.png)
有效的解决方法
将上面css截图的下半部分注释掉,如下图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201505/a528c34d32dede6e28fbdfd99c068e78.png)
然后在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中均能正常弹出带边角的框了。
希望本文对您有所帮助。
相关文章推荐
- JQuery boxy插件弹出框的四个边角图片在IE中不显示问题的解决
- JQuery boxy插件弹出框的四个边角图片在IE中不显示问题的解决
- JQuery boxy插件在IE中边角图片不显示问题的解决
- jQuery插件layer扩展:解决大图显示时,图片的比例问题
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)
- 解决WordPress后台安装主题、插件图片不显示的问题
- IE下background背景图片无法显示问题解决方法
- fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
- Jquery插件fancybox1.3.1在IE中图片显示问题
- Jcrop 做图片剪裁 在IE中无法显示问题解决办法
- IE下background背景图片无法显示问题解决方法
- 解决IE 7.0不能显示PNG图片的问题
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)
- fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)
- 解决SYSLOG插件时间日志时间显示不正确的问题
- 解决nginx无法显示图片的问题
- Ipython.display不显示图片的问题解决