CSS+JS实现遮罩层弹框

最新推荐文章于 2024-02-18 02:37:57 发布

liuw510

最新推荐文章于 2024-02-18 02:37:57 发布

阅读量575

点赞数

分类专栏： web前端开发文章标签： CSS+JS实现遮罩层弹框

本文链接：https://blog.csdn.net/liuw510/article/details/79390175

版权

web前端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

具体实现代码

<!DOCTYPE html>    
<html>    
<head>    
<meta charset=" utf-8">    
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS弹出遮罩层</title>
<style type="text/css"> 
* 
{ 
 margin:0px; 
 padding:0px; 
} 
.zhezhao 
{ 
 width:100%; 
 height:100%; 
 background-color:#000; 
 filter:alpha(opacity=50); 
 -moz-opacity:0.5; 
 opacity:0.5; 
 position:absolute; 
 left:0px; 
 top:0px; 
 display:none; 
 z-index:1000; 
} 
.login 
{ 
 width:280px; 
 height:180px; 
 line-height: 180px;
 text-align: center;
 position:absolute; 
 top:200px; 
 left:50%; 
 background-color:#808080; 
 margin-left:-140px; 
 display:none; 
 z-index:1500; 
} 
.content 
{ 
 margin-top:50px; 
 color:red; 
 line-height:200px; 
 height:200px; 
 text-align:center; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function() 
{ 
 var zhezhao=document.getElementById("zhezhao"); 
 var login=document.getElementById("login"); 
 var bt=document.getElementById("bt"); 
 var btclose=document.getElementById("btclose"); 

 bt.onclick=function() 
 { 
  zhezhao.style.display="block"; 
  login.style.display="block"; 
 } 
 btclose.onclick=function() 
 { 
  zhezhao.style.display="none"; 
  login.style.display="none";  
 } 
} 
</script> 
</head> 
<body> 
  <div class="zhezhao" id="zhezhao"></div> 
  <div class="login" id="login"><button id="btclose">点击关闭遮罩层和提示框
</button></div>  
  <div class="content">内容区域<button id="bt">点击打开遮罩层和提示框</button></div> 
</body> 
</html>

liuw510

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS+JS实现遮罩层弹框

具体实现代码&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=" utf-8"&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;&lt;
复制链接

扫一扫

专栏目录