JQuery boxy插件在IE中邊角圖片不顯示問(wèn)題的解決
JQuery boxy插件很好用,但也會(huì)出現(xiàn)一些問(wèn)題,比如彈出框的邊角在IE中不能顯示。本博文將來(lái)解決這個(gè)問(wèn)題。將boxy插件引用到項(xiàng)目中后會(huì)有一個(gè)boxy.css文件和jquery.boxy.js文件。在boxy.css文件中有給彈出框設(shè)置四個(gè)角圖片的樣式,如下圖:
不做任何修改在Chrome瀏覽器下沒(méi)有問(wèn)題,如下:
在網(wǎng)上查了一些資料,說(shuō)將css文件中的圖片路徑給位全路徑可以解決問(wèn)題,如下:
發(fā)現(xiàn)這樣修改后并沒(méi)有作用,運(yùn)行后效果仍然如下:
有效的解決方法
將上面css截圖的下半部分注釋掉,如下圖:
然后在jquery.boxy.js文件中的Boxy函數(shù)中添加一段腳本,下面貼出修改后的Boxy函數(shù)代碼:
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中的顯示問(wèn)題
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文件后,再次運(yùn)行程序,在IE6,7,8中均能正常彈出帶邊角的框了。
希望本文對(duì)您有所幫助。
- jQuery插件boxScroll實(shí)現(xiàn)圖片輪播特效
- jQuery插件expander實(shí)現(xiàn)圖片翻轉(zhuǎn)特效
- jQuery圖片特效插件Revealing實(shí)現(xiàn)拉伸放大
- jQuery插件slicebox實(shí)現(xiàn)3D動(dòng)畫(huà)圖片輪播切換特效
- jQuery插件slick實(shí)現(xiàn)響應(yīng)式移動(dòng)端幻燈片圖片切換特效
- jquery 插件實(shí)現(xiàn)瀑布流圖片展示實(shí)例
- jQuery插件實(shí)現(xiàn)大圖全屏圖片相冊(cè)
- 在瀏覽器中實(shí)現(xiàn)圖片粘貼的jQuery插件-- pasteimg使用指南
- jquery圖片播放瀏覽插件prettyPhoto使用詳解
- jquery插件jquery.beforeafter.js實(shí)現(xiàn)左右拖拽分隔條對(duì)比圖片的方法
相關(guān)文章
調(diào)用HttpHanlder的幾種返回方式小結(jié)
本篇文章主要是對(duì)調(diào)用HttpHanlder的幾種返回方式進(jìn)行了總結(jié)介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12
基于jQuery實(shí)現(xiàn)Div窗口震動(dòng)特效代碼-代碼簡(jiǎn)單
本文給大家介紹基于jiquery實(shí)現(xiàn)div窗口震動(dòng)特效代碼,需要的朋友可以參考下2015-08-08
jQuery實(shí)現(xiàn)輸入框郵箱內(nèi)容自動(dòng)補(bǔ)全與上下翻動(dòng)顯示效果【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)輸入框郵箱內(nèi)容自動(dòng)補(bǔ)全與上下翻動(dòng)顯示效果,涉及jquery.autoComplete.js插件的使用,可實(shí)現(xiàn)輸入框內(nèi)容自動(dòng)補(bǔ)全的功能,附帶了完整的demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
基于jQuery+HttpHandler實(shí)現(xiàn)圖片裁剪效果代碼(適用于論壇, SNS)
上次發(fā)了幾個(gè)jQuery的插件和些心得, 很多園友(也許是自己站上的)發(fā)郵件希望能提供更多的源碼, 正好這次有個(gè)同學(xué)希望在自己的壇子上掛個(gè)圖片裁剪以生成頭像的功能, 于是幫忙寫(xiě)了這么個(gè)插件.也許很多園友用得著, 就一并發(fā)上來(lái)啦.2011-09-09
推薦40款強(qiáng)大的 jQuery 導(dǎo)航插件和教程(上篇)
在下面的集合中,你會(huì)發(fā)現(xiàn)很多便利的 jQuery 導(dǎo)航插件和有用的教程,幫助你實(shí)現(xiàn)充滿吸引力的網(wǎng)站導(dǎo)航,讓你網(wǎng)站更有組織性和交互性2012-09-09
jquery左邊浮動(dòng)到一定位置時(shí)顯示返回頂部按鈕
這篇文章主要介紹通過(guò)jquery實(shí)現(xiàn)左邊浮動(dòng)到一定位置時(shí)顯示返回頂部按鈕的效果,需要的朋友可以參考下2014-06-06
jQuery ajax全局函數(shù)處理session過(guò)期后的ajax跳轉(zhuǎn)問(wèn)題
這篇文章主要介紹了基于jQuery的全局ajax函數(shù)處理session過(guò)期后的ajax操作的相關(guān)資料,需要的朋友可以參考下2016-06-06






