이 글에서는 주로 참고할 가치가 있는 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; }
관련 추천:
jQuery는 웹 페이지를 열거나 마스크 레이어 팝업을 클릭할 때 자동으로 마스크 레이어를 팝업하는 기능을 구현합니다.
이후 페이지 스크롤을 방지하는 방법의 예 마스크 레이어
위 내용은 jQuery 마스크 레이어 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!