Lösung für das Problem, dass die Eckbilder des JQuery-Boxy-Plug-Ins nicht in IE_jquery angezeigt werden

Das JQuery-Boxy-Plugin ist einfach zu verwenden, es gibt jedoch auch einige Probleme. Beispielsweise können die Ecken der Popup-Box im IE nicht angezeigt werden. Dieser Blogbeitrag wird sich in Zukunft mit diesem Problem befassen. Nach der Referenzierung des Boxy-Plug-Ins im Projekt gibt es eine boxy.css-Datei und eine jquery.boxy.js-Datei. In der Datei boxy.css werden die Stile der vier Eckbilder für das Popup-Feld festgelegt, wie unten gezeigt:

Es gibt kein Problem im Chrome-Browser, ohne irgendwelche Änderungen vorzunehmen, wie folgt:

Ich habe einige Informationen im Internet überprüft und festgestellt, dass die Angabe des vollständigen Pfads zum Bildpfad in der CSS-Datei das Problem wie folgt lösen kann:

Ich habe festgestellt, dass diese Änderung keine Auswirkung hat. Nach dem Ausführen ist der Effekt immer noch wie folgt:

Effektive Lösung

Kommentieren Sie den unteren Teil des CSS-Screenshots oben aus, wie unten gezeigt:

Fügen Sie dann ein Skript zur Boxy-Funktion in der Datei jquery.boxy.js hinzu. Der geänderte Boxy-Funktionscode wird unten veröffentlicht:

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();

};

Nachdem Sie die CSS- und JS-Dateien geändert haben, führen Sie das Programm erneut aus. Das Feld mit den Ecken kann in IE6, 7 und 8 normal angezeigt werden.

Ich hoffe, dieser Artikel ist hilfreich für Sie.