<div style = "위치 : 고정; 너비 : 100%; 높이 : 100%; 왼쪽 : 0px; 상단 : 0px; 배경색; Z- 인덱스 : 9999; 필터 : 알파 (불투명도 = 70); 불투명도 : 0.7;"> </div.
z- 인덱스 必须大于遮罩元素
데모
<! docType html> <html> <head> <meta charset = "utf-8"> <title> < /title> <meta name = "viewport"content = "width ="device-width, 초기-스케일 = 1, maximum-scale = 1 " /> <meta name ="Apple-Mobile-Web-App-Capable "="script type = "" "" "" "" "" "" "" " /> < src = "jquery-1.7.2.min.js"> </script> <style type = "text/css"> ul {list-style-type : none; 여백 : 0; 패딩 : 0; 너비 : 15em; } ul a {display : 블록; 텍스트 결정 : 없음; } ul li {마진-탑 : 1px; } ul li a {배경 : #333; 색상 : #fff; 패딩 : 0.5EM; } ul li a : 호버 {배경 : #000; } ul li ul li a {배경 : #ccc; 색상 : #000; 왼쪽 패딩 : 20px; } ul li ul li a : 호버, ul li ul .current a {배경 : #aaa; 왼쪽 경계 : 5px #000 고체; 왼쪽 패딩 : 15px; } </style> </head> <body> <div id = "bb"style = "Back <li> <a href = "javaScript : Alert ( '당신은 당신이 원할 수 있습니다');"> 老大大 </a> <li> <li> a href = "javaScript : Alert ( 'you want');"> </a> <li> <li> <li> <li> <li> <li>> rant '); <a href = "javaScript : Alert ( '당신은 원할 수 있습니다');"> 老大四 </a> <li> </ul> <li> <li> <a href = "javaScript : Alert ( '당신은 원할 수 있습니다');"> 老二 </a> <li> <li> <a href = "javascript : ALERT ( '); <li> <a href = ""> </a> </a> <ul> <li> <a href = "javaScript : alert ( '당신은 원할 수 있습니다');"> 老一 </a> <li> </ul> <li> </ul> <br> <br> <br> <br> <br> <br> <br> <br> <br> id = "aa"> 哈哈 </button> <div id = "zz"style = "display : none; 위치 : 고정 : 고정; 폭 : 100%; 높이 : 100%; 왼쪽 : 0px; 상단 : 0px; Z-index : 1999; 필터 : Alpha (exacity = 70); 불투명도 : 0.7; "> </div> </body> <script type ="text/javaScript "> $ (function () {$ ("#aa "). 클릭 (function () {$ ("#zz "). show (); $ ("#bb "). show (); $ ("#bb "). Animate ({100px '}); $ ( "#ZZ"); a "). click (function () {var a = $ (this); var nextobj = a.next (); if (nexobj.is ("ul "))) {$ ( '##bb ul li ul : visible'). slideup ( 'normal'); if (! nextobj.is ( ': visisible')) {nextobj.slidedown ( 'normal');}); </script> </html>