功能是页面上下滚动不影响弹层的垂直绝对居中,他会跟着滚动的页面自动调整位置以达到垂直居中效果。效果如下(由于文件大小限制,滚动速度快进了2倍,实际鼠标滚动速度更缓慢平滑):
HTML:
<body class="page-body">
<a href="javascript:void(0)" class=" dt-lk12" name="view">点击弹层</a>
<div class="page-popupCom opacity-com content" style="display: none;">
<div class="contract-pics ">
<img src="8.png">
</div>
</div>
<!-- 假定用一张背景图撑开页面高度 -->
<img src="bg.png" class="bgh">
</body>
CSS:
<style type="text/css">
.page-body{ overflow-x: hidden; position: relative;}
.bgh{ position: absolute; left: 0; top: 0; z-index: -1 }
.page-popupCom{ position: fixed; left: 0; top: 0; z-index: 10}
.dt-lk12{ width: 118px; height: 30px; display: block; background-color: #f60; position: absolute; top: 0; left: 50%; margin: 100px auto; color: #fff; text-align: center; line-height: 30px}
.opacity-com{ background-color: rgba(0,0,0,0.4); width: 100%; height: 100%}
.contract-pics{ width: 1000px; text-align: center; margin: auto; height: 900px; overflow-y: scroll; position: absolute; top: 0; left: 0; z-index: 10;}
.contract-pics img{ max-width: 100% }
</style>
JS:
<script src="jquery.min.js"></script>
<script type="text/javascript">
$("[name='view']").click(function(){
$(this).next("div").fadeIn();
});
$(".opacity-com").click(function(){
$(this).fadeOut();
});
$(document).ready(function(){
$("[name='view']").click(function(){
var h = $(".bgh").height();
$('.opacity-com').css({ 'height': h });
$('.contract-pics').center();
$('.contract-pics').fadeIn();
return false;
});
});
jQuery.fn.center = function(loaded) {
var obj = this;
body_width = parseInt($(window).width());
body_height = parseInt($(window).height());
block_width = parseInt(obj.width());
block_height = parseInt(obj.height());
left_position = parseInt((body_width/2) - (block_width/2) + $(window).scrollLeft() -0);
if (body_width<block_width) { left_position = 0 + $(window).scrollLeft(); };
//如果页面弹层因为某些原因只固定在第一屏,页面滚动弹层就不见了,用下面的方法即可。如果header部分有公用引用,想要弹层往上提一些,可以直接-数字
//top_position = parseInt((body_height/2) - (block_height/2) + $(window).scrollTop() -0);
//if (body_height<block_height) { top_position = 0 + $(window).scrollTop(); };
//通常情况下,不需要js纯样式即可达到js实现的效果
top_position = parseInt((body_height/2) - (block_height/2) );
if(!loaded) {
//obj.css({'position': 'absolute'});
//obj.css({ 'top': top_position, 'left': left_position });
obj.css({ 'top': top_position,'left':left_position});
$(window).bind('resize', function() {
obj.center(!loaded);
});
$(window).bind('scroll', function() {
obj.center(!loaded);
});
} else {
obj.stop();
obj.css({'position': 'absolute'});
obj.animate({ 'top': top_position }, 200, 'linear');
}
}
</script>
大致思路就是:得到页面的实际高度、弹层的高度,绝对定位,我页面滚多少高度,弹层也相应的滚多少高度。我认为是在纯样式控制出问题的时候用js这种复杂的办法才合适,否则没必要如此麻烦。重点就是这句:
top_position = parseInt((body_height/2) - (block_height/2) + $(window).scrollTop() -0);
if (body_height<block_height) { top_position = 0 + $(window).scrollTop(); };