1. 首页
  2. IT资讯

html 最简遮罩层

页面偶尔使用到遮罩层,自己写了个最简的例子:

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>html 最简遮罩层</title> <script type="text/javascript"> function showDiv(){ 	document.getElementById('popDiv').style.display='block'; 	document.getElementById('bg').style.display='block'; } function closeDiv(){ 	document.getElementById('popDiv').style.display='none'; 	document.getElementById('bg').style.display='none'; } </script> </head> <body> <div id="popDiv" style="z-index:99;display:none;position:absolute;margin-top: 20%;margin-left: 40%;background-color: #FFF;">html 最简遮罩层<br/>html 最简遮罩层<br/> <a href="javascript:closeDiv()">关闭遮罩层</a></div> <div id="bg" style="display:none;background-color: #ccc;width: 100%;position:absolute;height: 100%;opacity: 0.5;z-index: 1;"></div> <div style="padding-top: 10%;padding-left:40%;z-index:1;"> <input type="Submit" name="" value="打开遮罩层" οnclick="javascript:showDiv()" /> </div> </body> </html>

相信很多人在刚接触前端或者中期时候总会遇到一些问题及瓶颈期,如学了一段时间没有方向感或者坚持不下去一个人学习枯燥乏味有问题也不知道怎么解决,对此我整理了一些资料 喜欢我的文章想与更多资深大牛一起讨论和学习的话 欢迎加入我的学习交流群907694362

原文始发于:html 最简遮罩层

主题测试文章,只做测试使用。发布者:逗乐男神i,转转请注明出处:http://www.cxybcw.com/22267.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code