弹出层随鼠标滑轮上下移动，页面遮罩层不动

kingrome2009

于 2017-09-27 16:27:43 发布

阅读量1.4k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/kingrome2017/article/details/78114292

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

注意

在fixed没有出现之前该如何实现弹出框？并不是现在退化而是为了更好的兼容，采用相对定位和绝对定位是如何解决的往下看，直接上代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<div style="background:#ddd; width:1000px;height:3000px; margin:auto;">页面内容</div>
<div style="height: 100%; z-index: 1;position: fixed; top: 0px; background: rgba(0, 0, 0, 0.6);width:100%;">透明层</div>
<div style=" position:absolute;z-index:2;top:0; width:100%;">
    <div style=" position:relative; width:500px; height:1000px; margin:auto; background:#9CC; z-index:2;top:50px;" >tip层</div>
</div>

</body>
</html>