页面滚动时div窗口始终居中

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/JavaScript">
        function fn1() {
            var _div = document.getElementById("div1");
            fnShowDiv(_div);
        }
        //显示指定DIV 
        function fnShowDiv(_div) {
            var iWidth = document.documentElement.clientWidth;
            var iHeight = document.documentElement.clientHeight + document.documentElement.scrollTop * 2;
            var h = 70; //div 高
            var w = 260; //div 宽

            _div.style.top = (iHeight - h) / 2 + "px";
            _div.style.left = (iWidth - w) / 2 + "px";
            _div.style.display = "block";
            _div.style.position = "absolute";
            _div.style.width = w + "px";
            _div.style.height = h + "px";
            _div.style.textAlign = "center";
            _div.style.margin = "0 auto";
            _div.style.background = "red";
            
        }
    </script>
</head>
<body>
<div id="div1" style=""></div>
<input type="button" id="btn1" style=" margin:700px auto" value="测试" onclick="fn1()" />
</body>
</html>

posted on 2017-07-06 00:17  街角的守望者  阅读(299)  评论(0编辑  收藏  举报

导航