JS弹出窗口

最新推荐文章于 2024-05-20 15:39:24 发布

as5005005

最新推荐文章于 2024-05-20 15:39:24 发布

阅读量66

点赞数

分类专栏：技术转载文章标签： XHTML HTML

技术转载专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script> 
function _(id) { 
  return document.getElementById(id); 
} 
var ti = null; 
function loading(){ 
    var tmd = 0; 
    var x1 = document.documentElement.clientWidth;  
    var y1 = document.body.offsetHeight; 
    var y2=document.documentElement.clientHeight;//整个页面的高度 
    with(_("div1")){ 
       style.width=x1+"px"; 
       if(y2>y1){ 
       style.height=y2+"px"; 
       }else{ 
       style.height=y1+"px"; 
       } 
       style.overflowX="hidden"; 
       style.overflowY="hidden"; 
       style.visibility="visible"; 
    } 
    _("div1").style.left=0; 
    _("div1").style.filter='Alpha(Opacity=0)'; 
    document.body.style.overflowX="hidden"; 
    document.body.style.overflowY="hidden"; 
    _("div2").style.top=parseInt(document.documentElement.scrollTop)+((document.documentElement.clientHeight-250)/2)+"px";  
    _("div2").style.left="50%"; 
    _("div2").style.marginLeft="-190px" 
    _("div2").style.visibility="visible"; 
    ti = setInterval("hei()",10); 
} 
var x = 0; 
function hei(){ 
    x+=10; 
    if(x<31){ 
        if(document.all){ 
            _("div1").style.filter='Alpha(Opacity='+x+')'; 
        }else{ 
            _("div1").style.opacity=""+x/100+"";     
        } 
    } 
} 
function unload(){ 
_("div1").style.visibility="hidden"; 
_("div2").style.visibility="hidden"; 
clearInterval(ti); 
x=0; 
} 
</script> 
<style> 
*{  
    padding: 0;  
     margin: 0;  
} 
div{ 
background-color:#fff; 
} 
#div1{ 
position:absolute; 
visibility:hidden; 
filter:alpha(opacity=70); 
background-color:#a6a6a6; 
z-index:9; 
} 
#div2{ 
position:absolute; 
width:371px; 
height:auto; 
border:2px #aeddf1 solid; 
visibility:hidden; 
left:expression((body.clientWidth-300)/2); 
background-color:#CCCCCC; 
text-align:center; 
z-index:10; 
} 
#top{ 
background-color:#eef7fe; 
height:23px; 
border-bottom:1px #aedef2 solid; 
text-align:right; 
} 
</style> 
</head> 
<body> 
<div id="div1" align="center"></div> 
<div id="div2"> 
    <div id="top"><img src="http://www.wotuitui.com/images/close.gif" style="cursor:hand;" onClick="unload();" alt="点击关闭"/></div> 
<div><br/><br/><br/>内容<br/><br/><br/><br/><br/></div> 
</div> 
<a href="javascript:loading();">打开</a> 
</body> 
</html>

as5005005

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS弹出窗口

[code="html"] function _(id) { return document.getElementById(id); } var ti = null; function loading(){ var tmd = 0; var x1 = document.documentElement.clientWidth; ...
复制链接

扫一扫