弹出层居中随鼠标滚动而滚动

最新推荐文章于 2019-01-23 16:54:00 发布

编程遗失的时光

最新推荐文章于 2019-01-23 16:54:00 发布

阅读量1.1k

点赞数

分类专栏： css js

本文链接：https://blog.csdn.net/SJian123/article/details/46325291

版权

js 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.joinclub {
width: 440px;
height: 282px;
border: 1px solid #6E665A;
border-radius: 5px;
background: #fff;
padding-top: 10px;
position: absolute;
z-index: 99999999;
display: none;
left: 50%;/*FF IE7*/
top: 50%;/*FF IE7*/
margin-left: -220px!important;/*FF IE7 该值为本身宽的一半 */
margin-top: -140px!important;/*FF IE7 该值为本身高的一半*/
margin-top: 0px;
position: fixed!important;/*FF IE7*/
position: absolute;/*IE6*/
_top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
.bg123 {
background-color: #ccc;
width: 100%;
height: 100%;
z-index: 99999998;
left: 0;
top: 0;/*FF IE7*/
filter: alpha(opacity=50);/*IE*/
opacity: 0.5;/*FF*/
position: fixed!important;/*FF IE7*/
position: absolute;/*IE6*/
_top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
</style>
</head>

<body>
<div style="width:100%; height:500px; border:1px solid red"></div>
<a href="#" οnclick="join_club()">点击我</a>
</body>
<div class="joinclub" id="joinclub" style="display:none">我是弹出菜单<input type="button" value="关闭我" οnclick="closeCustomer()" /></div>
<div id="bg123" class="bg123" style="display:none;"></div>
<div><p>111</p></div>
<div><p>111</p></div>
<div><p>111</p></div>
<div><p>111</p></div>
<div><p>111</p></div>

<div><p>111</p></div>
<div><p>111</p></div>
<div><p>111</p></div>
<div><p>111</p></div>
<div><p>111</p></div>
<div><p>111</p></div>
<div><p>111</p></div>
<div><p>111</p></div>
<div><p>111</p></div>
<div><p>111</p></div>
<div><p>111</p></div>
<div><p>111</p></div>
<div><p>111</p></div>
<div><p>111</p></div>
<div><p>111</p></div>
<div><p>111</p></div>
<div><p>111</p></div>
<div><p>111</p></div>
<div><p>111</p></div>
<script type="text/javascript">
function closeCustomer(){
document.getElementById("joinclub").style.display='none';
document.getElementById("bg123").style.display='none';
}
function join_club()
{
document.getElementById('joinclub').style.display = 'block';
document.getElementById('bg123').style.display = 'block';
}
</script>
</html>

编程遗失的时光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹出层居中随鼠标滚动而滚动

无标题文档.joinclub {width: 440px;height: 282px;border: 1px solid #6E665A;border-radius: 5px;background: #fff;padding-top: 10px;position: absolute;z-index: 99999999;display: none;le
复制链接

扫一扫

专栏目录