dom 优酷得弹出

时间：2020-12-09 05:27:02
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

body{

    margin:0px;

    }

#wrap{

    background:black;

    opacity:0.3;

    filter:alpha(apacity=30);

    position:absolute;

    left:0px;

    top:0px;

    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;

    }

</style>

<script type="text/javascript">

window.onload = function ()

{

    var obtn = document.getElementsByTagName('input')[0];

    var owrap = document.getElementById('wrap');

    var obox = document.getElementById('box');

    var oa = document.getElementById('close');

    oa.onclick = function ()

    {

        owrap.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;

        owrap.style.display = 'block';

        owrap.style.width = Math.max(document.documentElement.clientWidth,document.body.offsetWidth) + 'px';

        owrap.style.height = Math.max(document.documentElement.clientHeight,document.body.offsetHeight) + '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(obox.style.display == 'none') return;

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

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

        owrap.style.width = Math.max(document.documentElement.clientWidth,document.body.offsetWidth) + 'px';

        owrap.style.height = Math.max(document.documentElement.clientHeight,document.body.offsetHeight) + 'px';    

        obox.style.left = (document.documentElement.clientWidth - obox.offsetWidth )/2 + scrollLeft + 'px';

        obox.style.top = (document.documentElement.clientHeight - obox.offsetHeight )/2 + scrollTop + 'px';

    };

}

</script>

</head>

<body style="height:2000px;">

    <input type="button" value="登陆">

    <div id="wrap"></div>

    <div id="box">

        <a href="javascript:;" id="close">x</a>

            这里是登陆的表单等内容

    </div>

    <div>

</body>

</html>

相关文章