JS弹窗——点击/滚动/缩放居中

CSS代码：

#mask {background: black; opacity: 0.3; filter: alpha(opacity=30); position: absolute; left: 0; top: 0; display: none;}
#box { width: 300px; height: 200px; padding: 10px; background: white; border: 5px solid #333; position: absolute; display: none;}
#close { position: absolute; right: 5px; top: 5px; text-decoration: none; color: black;}
#close:hover {background: #333; color: white;}

HTML代码：

<body style="height:2000px;">
    <input type="button" value="登陆" id="btn" />
    
    <div id="mask"></div>
    <div id="box">
        <a href="javascript:;" id="close">×</a>
        内容显示区域
    </div>
</body>

JS代码：

window.onload = function(){
        var oBtn = document.getElementById('btn');
        var oMask = document.getElementById('mask');
        var oBox = document.getElementById('box');
        var oClose = document.getElementById('close');

        oClose.onclick = function(){
            oMask.style.display = 'none';
            oBox.style.display = 'none';
        };

        //点击按钮居中显示
        oBtn.onclick = function(){
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var scrollLeft = document.documentElement.scrollLeft || document.body .scrollLeft;

            oMask.style.display = 'block';
            oMask.style.width = Math.max(document.body.offsetWidth ,document.documentElement.clientWidth) + 'px';
            oMask.style.height = Math.max(document.body.offsetHeight ,document.documentElement.clientHeight) + 'px';

            oBox.style.display = 'block';
            oBox.style.left = (document.documentElement.clientWidth - oBox.offsetWidth)/2 + scrollLeft + 'px';
            oBox.style.top = (document.documentElement.clientHeight - oBox.offsetHeight)/2 + scrollTop + 'px';

        };

        //拖动滚动条居中显示
        window.onscroll = function(){
            if(oBox.style.display == 'none') return;

            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

            oBox.style.left = (document.documentElement.clientWidth - oBox.offsetWidth)/2 + scrollLeft + 'px';
            oBox.style.top = (document.documentElement.clientHeight - oBox.offsetHeight)/2 + scrollTop + 'px';
        };

        //缩放窗口居中显示
        window.onresize = function(){
            if(oMask.style.display == 'none') return;

            oMask.style.left = Math.max(document.body.offsetWidth ,document.documentElement.clientWidth);
            oMask.style.top = Math.max(document.body.offsetHeight,document.documentElement.clientHeight);

            if(oBox.style.display == 'none') return;

            var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

            oBox.style.left = (document.documentElement.clientWidth - oBox.offsetWidth)/2 + scrollLeft + 'px';
            oBox.style.top = (document.documentElement.clientHeight -oBox.offsetHeight)/2 + scrollTop + 'px';
        };

    };

 

posted @ 2015-03-13 10:37  波克比520  阅读(453)  评论(0)  编辑  收藏  举报