zoukankan html css js c++ java

dom 优酷得弹出

<!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{
    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>

查看全文

相关阅读:
转发-》c++ stl multimap基本操作使用技巧详细介绍
 控件传递，待更新
 封装函数获取体的最大4个角
 找vector最大最小《转载》
获取面面积，资料来自录制和网友分享
 【转】插入排序
 NXOpen获取UFUN的tag
创建注释
 创建铜公开粗程序
 NXopen create chamfer tool

原文地址：https://www.cnblogs.com/mayufo/p/4211060.html