JS+CSS简单实现DIV遮罩层显示隐藏

孤者浪人 提交于 2020-03-06 21:48:56

 

复制代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2  <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>DIV CSS遮罩层</title> 5 <script language="javascript" type="text/javascript"> 6 function showdiv() {            7             document.getElementById("bg").style.display ="block"; 8             document.getElementById("show").style.display ="block"; 9         } 10 function hidediv() { 11             document.getElementById("bg").style.display ='none'; 12             document.getElementById("show").style.display ='none'; 13         } 14 </script> 15 <style type="text/css"> 16         #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);} 17         #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;} 18 </style> 19 </head> 20 <body> 21 <input id="btnshow" type="button" value="Show" onclick="showdiv();"/> 22 <div id="bg"></div> 23 <div id="show">测试 24 <input id="btnclose" type="button" value="Close"
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!