반투명 마스크 층 효과는 기본적으로 플러그인을 사용하여 달성됩니다. 반투명 마스크 효과를 달성하기 위해 Native JS를 사용하여 공유하겠습니다. 관심있는 친구들이 그것을 언급 할 수 있습니다. 네이티브 JS에 익숙해지는 것이 도움이되기를 바랍니다.
<div> <h4> <span> 지금 등록 </span> <span> close </span> </h4> <p> <p> <p> <label> username </label> <입력 유형 = "text"onmouseover = "this.style.border = '1px solid #f60'"onfoucs = "theys.style.border = '1px solid #f60'"thistye = "this. solid #ccc ' "/> </p> <p> <label> 비밀번호 </label> <입력 유형 ="password "onmouseover ="this.style.border ='1px solid #f60 ' "onfoucs ="this.style.border ='1px solid #f60 ' "on theblur ="the.style.border ='1px solid #cc ' "" <입력 유형 = "제출"value = "register"/> <입력 유형 = "reset"value = "Reset"/> </p> </div> <div> </div> <!-마스크 레이어 div-> <script type = "text/javaScript"> var myalert = document.getElementById ( "Alert"); var mymask = document.getElementById ( 'mask'); var reg = document.getElementById ( "content"). getElementsByTagName ( "a") [0]; var mclose = document.getElementById ( "Close"); reg.onclick = function () {mymask.style.display = "block"; myalert.style.display = "block"; myalert.style.position = "절대"; myalert.style.top = "50%"; myalert.style.left = "50%"; myalert.style.margintop = "-75px"; myalert.style.marginleft = "-150px"; document.body.style.overflow = "숨겨진"; } mclose.onclick = function () {myalert.style.display = "none"; mymask.style.display = "none"; } </script> </body> </html>전체 화면 표지
<! doctype html> <style> #mask {위치 : 고정; 너비 : 100%; 상단 : 0px; 왼쪽 : 0px; _position : 절대; _top : expression (documentElement.scrolltop); 배경 : RGBA (0,0,0,0.5); 배경 : 투명한/9; 필터 : progid : dximagetransform.microsoft.gradient (startColorstr =#80000000, endColorStr =#80000000); 디스플레이 : none;}#mask_td {text-align : center;} </style> <img src = "http://web-tinker.com/images/themagicconch.jpg"id = "img"/> <table id = "mask"> <t> <td id = "mask_td"> </td> isie = navigator.useragent.match (/msie (/d)/i); isie = isie? isie [1] : isie; // 변수 var img, mask; // 요소 img = document.getElementById ( "img"); mask = document.getElementById ( "mask"); mask _ // // OF MASK MASK.SETSIZE = function () {// 문서의 가시 영역 너비를 가져 와서 마스크 var de = document.documentElement; mask.style.width = de.clientWidth+"px"mask.style.seight.height = de.clientHeight+"px"mask.style.height = de.clientHeight+"px";}; // 쇼 메소드 MAST.SHOW = function () {// scrollbar 문서 숨기기 [isie <9? " ] .style.overflow = "숨겨진"; // 마스크 마스크의 크기를 계산합니다 .SetSize (); // show mask.style.display = isie == 6? "block": "table";}; // 메소드 마스크 추가 마스크를 추가합니다. hide = function () {// 페이지 표시 스크롤 바 문서 표시 // mask.td.innerhtml = ""내에서 내용을 지우십시오. // mask.style.display = "none";}; // 부록 메소드 추가 메소드 마스크 추가 마스크를 추가합니다. (e.target || e.srcelement) == mask.td && mask.hide ();}; // 양식 크기가 Window.onResize = function () {mask.setsize ();}를 변경할 때 마스크 크기를 추가합니다. // 이미지 img.onclick = function () {) {// 이미지 대상을 클릭하십시오. // 이미지 주소 설정 O.SRC = IMG.SRC; // 컨텐츠 마스크 추가. // 마스크 마스크 표시 .Show ();}; </script>