html js 弹出层弹窗假弹窗

最新推荐文章于 2021-06-03 11:56:33 发布

Alvin__Xie

最新推荐文章于 2021-06-03 11:56:33 发布

阅读量300

点赞数

分类专栏： js 文章标签： js html

本文链接：https://blog.youkuaiyun.com/weixin_43577190/article/details/107160802

版权

js 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何仅使用HTML和CSS创建一个弹出层弹窗，包括弹窗样式设置、显示隐藏功能及背景遮罩效果。通过内联样式和简单的JavaScript函数实现了弹窗的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

纯htlm 弹出层弹窗

代码如下：

    <style>  
.white_content {  
 display: none;  
 position: absolute;   
 left: 25%;  
 width: 50%;  
 padding: 6px 16px;  
 border-top: 30px solid #6cabc5;  
 background-color: white;  
 z-index:1002;  
 overflow: auto; 
 border-radius: 10px;
}  
.black_overlay {  
 display: none;  
 position: absolute;  
 top: 0%;  
 left: 0%;  
 width: 100%;  
 height: 100%;  
 background-color:#f5f5f5;  
 z-index:1001;  
 opacity:.80;  
 filter: alpha(opacity=80);  
}  
.close {  
    margin-top: -28px;
    margin-right: 20px;
}  
.close a {  
 color:#fff;  
 text-decoration:none;  
 font-size:14px;  
 position: fixed; 
}  
</style>  
<script>  
        function show(tag){  
         var light=document.getElementById(tag);  
         light.style.display='block';  
         $("#fade").css('display','block');   
         }  
        function hide(tag){  
         var light=document.getElementById(tag);  
         light.style.display='none';  
         $("#fade").css('display','none');  
        }
</script>
       <a href="javascript:void(0)" onclick ="show('light')">点击</a>  
<div id="light" class="white_content">  
      <div class="close"><a href="javascript:void(0)" onclick ="hide('light')"> 关闭</a></div> 
                        <div style="overflow:scroll;height:450px;" > 
                            111
                        </div></div>