JQuery boxy外掛程式在IE中邊角圖片不顯示問題的解決，jqueryboxy

JQuery boxy外掛程式在IE中邊角圖片不顯示問題的解決，jqueryboxy

JQuery boxy外掛程式很好用，但也會出現一些問題，比如彈出框的邊角在IE中不能顯示。本博文將來解決這個問題。將boxy外掛程式引用到項目中後會有一個boxy.css檔案和jquery.boxy.js檔案。在boxy.css檔案中有給彈出框設定四個角圖片的樣式，如：

不做任何修改在Chrome瀏覽器下沒有問題，如下：

在網上查了一些資料，說將css檔案中的圖片路徑給位全路徑可以解決問題，如下：

發現這樣修改後並沒有作用，運行後效果仍然如下：

有效解決方案

將上面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中均能正常彈出帶邊角的框了。

希望本文對您有所協助。