欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【实用】超级简单易懂的CSS+JS弹出层

程序员文章站 2022-03-08 23:02:22
...

 经常会用到的弹出层,但又忘记样式控制怎么办,目前总结了以下一套方法

 



//核心样式

<style>
    .opacity5{opacity:0.5;-webkit-opacity:0.5;-moz-opacity:0.5;-khtml-opacity:0.5;filter:alpha(opacity=50);
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);}
    .weui-agree__text { color: #020202; }
    .btn-circle { border-radius: 32px; margin: 5px 20px; }
    .tc_html{width: 100%;height: 100%;position: absolute;}
    .zc_tc{width: 100%;height: 100%;position: fixed;z-index: 98;background-color: #333;}
    .zc_content{width: 90%;height: 400px;position: absolute;z-index: 99;background-color: white;bottom: 0.5rem;left: 5%;top: 50%;margin-top: -200px}
    </style>

 

//需要用到JavaScript

<script type="text/javascript">
	$(function(){
		$(".yonghu").click(function(){
			$(".tc_html").css("display","block");
		})
	})
</script>

 

<!-- 核心Html -->

<div class="tc_html" style="display: none">
	<div class="opacity5 zc_tc"></div>
	<div class="zc_content"></div>
</div>

 

效果图

【实用】超级简单易懂的CSS+JS弹出层

相关标签: css弹出层