DIV CSS遮罩层-白红宇

DIV CSS遮罩层

阅读量：5830 次

发布时间：2019-06-18

本文共 1021 字，大约阅读时间需要 3 分钟。

  
     
        
      DIV CSS遮罩层 
      
        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'; }  
       
         #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;}    
         
        
          
         
          测试

原理比较简单，就是在页面内先定义好需要显示的DIV和遮罩层的CSS,然后用在onclick事件时，通过JS去控制两个DIV的样式：display='block' or display='none'.就可以实现DIV的显示和隐藏。

注意两个DIV的z-index，显示在最上面的DIV的z-index一定要比遮罩层的z-index大

转载于:https://my.oschina.net/u/1793291/blog/362788

你可能感兴趣的文章

.NET 设计规范--.NET约定、惯用法与模式-2.框架设计基础

查看>>

win7 64位+Oracle 11g 64位下使用 PL/SQL Developer 的解决办法

查看>>

BZOJ1997：[HNOI2010]PLANAR——题解

查看>>

BZOJ1014：[JSOI2008]火星人prefix——题解

stream classdesc serialVersionUID = -7218828885279815404, local class serialVersionUID = 1.

查看>>

ZAB与Paxos算法的联系与区别

查看>>

Breaking parallel loops in .NET C# using the Stop method z

查看>>

修改故障转移群集心跳时间

查看>>

[轉]redis;mongodb;memcache三者的性能比較

查看>>

微软职位内部推荐-Sr DEV

查看>>

让你的WPF程序在Win7下呈现Win8风格主题

查看>>

802.11 学习笔记

查看>>

Leetcode-Database-176-Second Highest Salary-Easy（转）

查看>>