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

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

 

//核心样式

<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>

 

效果图