DIV CSS遮罩層

時間 2019-11-24

標籤 div css 欄目 CSS 简体版

原文原文鏈接

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>DIV CSS遮罩層</title>
 <script language="javascript" type="text/javascript">
 function showdiv() { 
 document.getElementById("bg").style.display ="block";
 document.getElementById("show").style.display ="block";
 }
 function hidediv() {
 document.getElementById("bg").style.display ='none';
 document.getElementById("show").style.display ='none';
 }
 </script>
 <style type="text/css">
 #bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);}
 #show{display: none; position: absolute; top: 25%; left: 22%; width: 53%; height: 49%; padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index:1002; overflow: auto;}
 </style>
 </head>
 <body>
 <input id="btnshow" type="button" value="Show" onclick="showdiv();"/>
 <div id="bg"></div>
 <div id="show">測試
 <input id="btnclose" type="button" value="Close" onclick="hidediv();"/>
 </div>
 </body>
 </html> 
  
 
    
 
   
 原理比較簡單，就是在頁面內先定義好須要顯示的DIV和遮罩層的CSS,而後用在onclick事件時，經過JS去控制兩個DIV的樣式：display='block' or display='none'.就能夠實現DIV的顯示和隱藏。 
 
 注意兩個DIV的z-index，顯示在最上面的DIV的z-index必定要比遮罩層的z-index大 

1. DIV CSS遮罩層
2. 遮罩層DIV+CSS
3. css遮罩層
4. CSS遮罩層
5. css——遮罩層
6. css 遮罩層
7. js+div遮罩層
8. 遮罩層（JS+CSS）
9. css+jQuery遮罩層
10. CSS DIV遮罩操做
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• Docker容器實戰(七) - 容器眼光下的文件系統
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。