jQuery 마스크 층 실례 설명

본 논문 의 사례 는 jQuery 커버 층 이 보 여 준 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
1.1 배경 반투명 커버 층 스타일
검은색(물론 다른 것 도 가능)배경 이 필요 하고 절대적 인 위치 로 설정 해 야 합 니 다.다음은 프로젝트 에 사용 되 는 css 스타일 입 니 다.

/*         */
#overlay {
  background: #000;
  filter: alpha(opacity=50); /* IE     */
  opacity: 0.5; /*     */
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 100; /*            */
  display:none;
}

1.2 jQuery 마스크 구현

/*       */
function showOverlay() {
  $("#overlay").height(pageHeight());
  $("#overlay").width(pageWidth());

  // fadeTo        ，       
  //          ，     ，           
  $("#overlay").fadeTo(200, 0.5);
}

/*       */
function hideOverlay() {
  $("#overlay").fadeOut(200);
}

/*        */
function pageHeight() {
  return document.body.scrollHeight;
}

/*        */
function pageWidth() {
  return document.body.scrollWidth;
}

1.3 프롬프트 상자
커버 의 목적 은 내용 을 조작 할 수 없 게 하고 제시 상 자 를 강조 하 는 것 이 아니 라 제시 상 자 는 위의 제작 을 참고 할 수 있 으 며 z-index 는 커버 층 보다 높 으 면 된다.주요 문 제 는 브 라 우 저 가운데 알림 상 자 를 어떻게 제어 하 느 냐 하 는 것 이다.

/*         */
function adjust(id) {
  var w = $(id).width();
  var h = $(id).height();
  
  var t = scrollY() + (windowHeight()/2) - (h/2);
  if(t < 0) t = 0;
  
  var l = scrollX() + (windowWidth()/2) - (w/2);
  if(l < 0) l = 0;
  
  $(id).css({left: l+'px', top: t+'px'});
}

//        
function windowHeight() {
  var de = document.documentElement;

  return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
}

//        
function windowWidth() {
  var de = document.documentElement;

  return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth
}

/*           */
function scrollY() {
  var de = document.documentElement;

  return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
}

/*           */
function scrollX() {
  var de = document.documentElement;

  return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.