CSS+JavaScript
구현 원칙 :
절대 포지셔닝을 사용하여 전체 화면 DIV를 만들어 다른 요소에 영향을 미치지 않고 문서 스트림에서 분리 할 수 있도록하여 반투명 상태로 설정하십시오. 물론,이 투명성은 마음대로 조정 될 수 있으며 로그인 요소를 만들 수 있으며,이 요소는 절대 포지셔닝을 사용하고 화면의 DIV보다 Z-INDEX 속성 값을 크게 만듭니다. 기본 상태 에서이 두 DIV의 디스플레이 속성 값은 없음입니다. 해당 버튼을 클릭하면 디스플레이 속성 값을 변경할 수 있습니다.
<! docType html> <html> <head> <meta charset = "utf-8"> <meta name = "author"content = "// www.vevb.com/"/> <title> 풀 스크린 그레이 블랙 투명한 마스크 효과 -wulin.com </title> <text/css "> {margin : 0px; 패딩 : 0px; } .zhezhao {너비 : 100%; 높이 : 100%; 배경색 :#000; 필터 : 알파 (불투명도 = 50); -Moz-opacity : 0.5; 불투명도 : 0.5; 위치 : 절대; 왼쪽 : 0px; 상단 : 0px; 디스플레이 : 없음; Z- 인덱스 : 1000; } .login {너비 : 280px; 높이 : 180px; 위치 : 절대; 상단 : 200px; 왼쪽 : 50%; 배경색 :#000; 마진 왼쪽 : -140px; 디스플레이 : 없음; Z- 인덱스 : 1500; } .Content {마진-탑 : 50px; 색상 : 빨간색; 라인 높이 : 200px; 높이 : 200px; 텍스트 정렬 : 센터; }. var login = document.getElementById ( "로그인"); var bt = document.getElementById ( "bt"); var btclose = document.getElementById ( "btclose"); bt.onclick = function () {zhezhao.style.display = "block"; login.style.display = "block"; } btclose.onclick = function () {zhezhao.style.display = "none"; login.style.display = "none"; }} </script> </head> <bod> <div id = "Zhezhao"> </div> <div id = "login"> <button id = "btclose"> 닫으려고 클릭하십시오 </button> </div> <div> wulin.com은 <button id = "bt"> 팝업 </div> </body> </body> </body> </div>위는 기본 마스크 기능을 구현합니다. 마스크를 팝업하기 위해 클릭하면 물체가 나타납니다. 닫으려면 클릭하면 마스크 효과가 사라집니다.
순수한 자바 스크립트 :
구현 효과 : 창이 팝업되면 창 뒤의 페이지가 어두워지고 작동 할 수 없습니다.
난이도 : DIV 레이어는 선택 제어를 덮을 수 없기 때문에 두 가지 특별한 방법이 있습니다. 하나는 팝업 창 아래에 iframe을 추가하여 선택을 덮는 것입니다. 두 번째는 팝업시 Select Control을 숨기고 여기에서 두 번째 방법을 선택하는 것입니다.
구현 원리 : 페이지와 팝업 창의 중간에 반투명 레이어를 추가하여 페이지의 내용을 덮어 씁니다.
암호:
<script language = "javaScript"> function Open () {// select displaySelect (0)를 숨기고; // 마스크 계층 표시 표시 .getElementById ( "divpagemask"). style.display = "block"; // 마스크 레이어 resizeMask () 훈련; Window.onresize = ResizeMask; // pop-up document를 표시합니다 .getElementById ( "divopenwin"). style.display = "block"; } function close () {// show select control displaySelect (1); // 마스크 레이어 divpagemask.style.width = "0px"; divpagemask.style.height = "0px"; divopenwin.style.display = "none"; Window.onresize = null; document.getElementById ( "divopenwin"). style.display = "none"; } // page mask function resizemask () {divpagemask.style.width = document.body.scrollwidth; divpagemask.style.height = document.body.scrollheight; divopenwin.style.left = ((document.body.offsetwidth -divopenwin.offsetwidth) / 2); divopenwin.style.top = ((document.body.offsetheight -divopenwin.offsetheight) / 2); } function displaySelect (val) {// select var var displayType를 표시하고 숨기고; var arrdispalytepe = [ "숨겨진", "Visible"]; var arrobjSelect = document.getElementsByTagName ( "select"); for (i = 0; i <arrobjselect.length; i ++) {arrobjSelect [i] .style.visibility = arrdispalyType [val]; }}} </script> <Style type = "text/css"> .body, td {font-size : 12px} #divpagemask {background-color : white; 필터 : 알파 (불투명도 = 50); 왼쪽 : 0px; 위치 : 절대; 상단 : 0px;} #divopenwin {배경 색상 : #eeeeee; 위치 : 절대; 왼쪽 : 0px; 상단 : 0px; 디스플레이 : 없음; z-index : 50; 너비 : 300px; 높이 : 150px} </style> <div id = "divpagemask"> </div> <div id = "divopenwin"> <center> <a href = "javaScript : close ();"> Close </a> </a> </a> </a> </a> <td colspan = "2"align = "center"> <p> <img src = "http://www.sopul.com/images/index/logo.gif"> </p> <p> </p> <p> </p> </td> </tr> <td 스타일 = "색상 :#666666; font-size : 13px"> </td> </tr> </tbody> </table> <table bgcolor = "#e1e1e1"cellPadding = "0"셀 패팅 = "1"> <td> <td align = "Center"bgcolor = "#f9f9"> ">"> ">"> ">"> " CellPadding = 0 width = 600 style = "margin-top : 20px"> <form name = "f"action = "http://www.sopull.com/shoplist.asp"> <tbody> <ttr> <td> 키워드 : </td> <td> <input type = "text"name = "k"30/> 30/> 30/> width = 101> 위치 : </td> <td align = 중간 너비 = 97 id = "cn"> <script language = "javaScript"src = "http://www.sopull.com/inc/js/listcity.asp?cityname=beijing"</script> </td> <td align = "" 유형 = 제출 값 = "검색 상점"> </td> </tr> </form> <tr> <td> </td> <td colspan = "4"valign = "middle"> 예를 들면 : 레스토랑; 가전 제품; 슈퍼마켓 </table> </td> </tr> </tbody> </table> </table> </table> </table> </center> <p align = "center"> </p> <p align = "center"> <a href = "javaScript : open ();"> ">"> ">"Center ""</p> < "<"al al = "" CellPadding = "0"CellPacing = "0"> <tbody> <!-<tr> <td align = "center"backgring = "images/index/line_2.gif"> <Img src = "images/index/line_2.gif"> </td>-> <td align = "center"> 색상 = "#ff6600"> 상점 프로모션 </a> | <a href = "#"> 상점 정보 </a> | <a class = b href = "#"target = _blank> 비즈니스 협력 </a> | <a onclick = "this.style.behavior = 'url (#default#homepage)'; this.sethomepage ( 'http://www.sopull.com'); Return False;" href = "http://www.sopull.com/#"> 홈페이지로 설정 </a> | <a onclick = "javaScript : window.external.addfavorite ( 'http://www.sopull.com/','soupu.com-China의 가장 큰 상점 검색 엔진 ')"href = "http://www.sopull.com/#"> 즐겨 찾기에 추가 </td> </td> <td> <td> spleu.com Guangdong ICP No. 07006767 </td> </tr> </tbody> </table>