IE_jquery에서 JQuery boxy 플러그인의 모서리 이미지가 표시되지 않는 문제에 대한 해결 방법

JQuery boxy 플러그인은 사용하기 쉽지만 IE에서는 팝업 상자의 모서리가 표시되지 않는 문제도 있습니다. 이 블로그 게시물에서는 앞으로 이 문제를 다룰 예정입니다. boxy 플러그인을 프로젝트에 참조하면 boxy.css 파일과 jquery.boxy.js 파일이 생성됩니다. boxy.css 파일에서는 아래와 같이 팝업 상자에 대한 네 모서리 이미지의 스타일이 설정됩니다.

크롬 브라우저에서는 별다른 수정 없이 아래와 같이 문제가 없습니다.

인터넷에서 몇 가지 정보를 확인해보니 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) &#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();

};

css, js 파일을 수정한 후 프로그램을 다시 실행하면 IE6, 7, 8에서는 모서리가 있는 상자가 정상적으로 나타납니다.

이 기사가 도움이 되기를 바랍니다.