【实用】超级简单易懂的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>
效果图
上一篇: oracle、hive中的分析函数详解
下一篇: C/C++指针数组的实现(代码教程)