网页常见效果，jquery弹出层

最新推荐文章于 2021-08-26 12:01:34 发布

AIALOG

最新推荐文章于 2021-08-26 12:01:34 发布

阅读量435

点赞数

分类专栏： jquery，jquery弹出层文章标签： jquery jquery弹出层

本文链接：https://blog.csdn.net/AIALOG/article/details/71104456

版权

jquery，jquery弹出层专栏收录该内容

1 篇文章 0 订阅

订阅专栏

网页当中常见的效果，点击按钮，图片等出现弹出层

<style>

.pop-body{display:none;background:#000;position:absolute;z-index:1000;top:0;left:0;opacity:0.5;}
.pop-home{background:#6cf;position:fixed;top:50%;left:50%;margin-top:-150px;margin-left:-150px;width:300px;height:300px;display:none;z-index:1100;}
.pop-home span{font-size:30px;position:absolute;top:10px;right:10px;cursor:pointer;}
.on{border:1px solid #000;height:800px;}
</style>
<body>
<div class="fore1">点击</div>
<div class="pop-body"></div>
<div class="pop-home">
<span>x</span>
</div>
<div class="on"></div>
<div class="on"></div>
<div class="on"></div>
<div class="on"></div>
<div class="on"></div>
<script src="jq源代码/jquery-3.1.0.js" type="text/javascript"></script>
<script src="jq源代码/jquery-3.1.0.1 .js" type="text/javascript"></script>
<script>
$('.fore1').click(function(){
var w=$(window).width()
var h=$(window).height()
$('.pop-body').show().css({width:w,height:h})
$('.pop-home').show()
$("body").css("overflow","hidden")
});
//点击关闭
$('.pop-home span,.pop-body').click(function(){
$('.pop-body,.pop-home').hide()
$('body').css('overflow','auto')
});
</script>
</body>