Solution to the problem that the corner images of the JQuery boxy plug-in do not display in IE_jquery

The JQuery boxy plug-in is easy to use, but there are also some problems. For example, the corners of the pop-up box cannot be displayed in IE. This blog post will address this issue in the future. After referencing the boxy plug-in into the project, there will be a boxy.css file and a jquery.boxy.js file. In the boxy.css file, the styles of the four corner images are set for the pop-up box, as shown below:

There is no problem in the Chrome browser without making any modifications, as follows:

I checked some information on the Internet and said that giving the full path to the image path in the css file can solve the problem, as follows:

I found that this modification has no effect. After running, the effect is still as follows:

Effective solution

Comment out the lower part of the css screenshot above, as shown below:

Then add a script to the Boxy function in the jquery.boxy.js file. The modified Boxy function code is posted below:

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) &#63; this.options.x : Boxy.DEFAULT_X,
      Boxy._u(this.options.y) &#63; 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();

};

After modifying the css and js files, run the program again, and the box with corners can pop up normally in IE6, 7, and 8.

Hope this article is helpful to you.