首頁 >web前端 >js教程 >javascript用DIV模拟弹出窗口_窗体滚动跟随_javascript技巧

javascript用DIV模拟弹出窗口_窗体滚动跟随_javascript技巧

WBOY原創: 2016-05-16 19:01:291204瀏覽

<title>可滚动跟随弹出框效果代码——脚本之家</title> 
<script> 
function getPosition() { 
var top = document.documentElement.scrollTop; 
var left = document.documentElement.scrollLeft; 
var height = document.documentElement.clientHeight; 
var width = document.documentElement.clientWidth; 
return {top:top,left:left,height:height,width:width}; 
}

function showPop(){ 
var width = 300; //弹出框的宽度 
var height = 160; //弹出框的高度 
var obj = document.getElementById("pop");

obj.style.display = "block"; 
obj.style.position = "absolute"; 
obj.style.zindex = "999"; 
obj.style.width = width + "px"; 
obj.style.height = height + "px";

var Position = getPosition(); 
leftadd = (Position.width-width)/2; 
topadd = (Position.height-height)/2; 
obj.style.top = (Position.top + topadd) + "px"; 
obj.style.left = (Position.left + leftadd) + "px";

window.onscroll = function (){ 
var Position = getPosition(); 
obj.style.top = (Position.top + topadd) +"px"; 
obj.style.left = (Position.left + leftadd) +"px"; 
}; 
}

function hidePop(){ 
document.getElementById("pop").style.display = "none"; 
} 
</script> 
 
 
作者：丁学－－滚动跟随 
<div id="pop" style="border:1px solid #CCC;display:none;">test <a href="javascript:hidePop();">hide</a>
</div> 
 
<a href="javascript:showPop()">show</a>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：js链接确认提醒功能_javascript技巧下一篇：javascript移动的盒子效果代码_javascript技巧

看更多

javascript用DIV模拟弹出窗口_窗体滚动跟随_javascript技巧

相關文章