JQuery boxy插件在IE中邊角圖片不顯示問題的解決
JQuery boxy插件很好用,但也會出現一些問題,比如彈出框的邊角在IE中不能顯示。本博文將來解決這個問題。將boxy插件引用到項目中后會有一個boxy.css文件和jquery.boxy.js文件。在boxy.css文件中有給彈出框設置四個角圖片的樣式,如下圖:
不做任何修改在Chrome瀏覽器下沒有問題,如下:
在網上查了一些資料,說將css文件中的圖片路徑給位全路徑可以解決問題,如下:
發(fā)現這樣修改后并沒有作用,運行后效果仍然如下:
有效的解決方法
將上面css截圖的下半部分注釋掉,如下圖:
然后在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動態(tài)添加Select的Option元素實現方法
下面小編就為大家?guī)硪黄狫Query動態(tài)添加Select的Option元素實現方法。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
jquery創(chuàng)建一個新的節(jié)點對象(自定義結構/內容)的好方法
jq創(chuàng)建一個新的節(jié)點對象,這對一些自定義功能很有幫助,而且可以隨意控制對象的結構與內容,何樂而不為呢,看到這里,相信有些朋友已經按耐不住了,好記下來為大家介紹實現方法,感興趣的朋友可以了解下哦2013-01-01






