网页打开时显示一个全屏的层,几秒钟后该层隐藏要怎么才能实现?

时间：2022-11-28 20:34:30
有客户要求其网站首页打开时有一个全屏动画,动画播放完毕后显示网页的主体内容,要求是不能使用转跳页,所以只能用层来实现.
要求:1.打开网页时该层全屏(浏览器窗口)显示
2.动画播放完毕后该层隐藏.(时间和动画不用考虑)

下面是我找到的代码但测试不行,可能我是水平有问题吧.如果按照下面的思路,请帮忙把代码补全,如果你有新的思路帮忙贴出来,谢谢. 
<script type="text/javascript"> 

function getWidth() 

{ 

    var strWidth,clientWidth,bodyWidth; 

    clientWidth = document.documentElement.clientWidth; 

    bodyWidth = document.body.clientWidth; 

    if(bodyWidth > clientWidth){ 

        strWidth = bodyWidth + 20; 

    } else { 

        strWidth = clientWidth; 

    } 

    return strWidth; 

} 

//获取高度 

function getHeight() 

{ 

    var strHeight,clientHeight,bodyHeight; 

    clientHeight = document.documentElement.clientHeight; 

    bodyHeight = document.body.clientHeight; 

    if(bodyHeight > clientHeight){ 

        strHeight = bodyHeight + 30; 

    } else { 

        strHeight = clientHeight; 

    } 

    return strHeight; 

} 


function showScreen() 

{ 

    var Element = document.getElementById('Message'); 

    var Elements = document.getElementById('Screen'); 

    Elements.style.width = getWidth(); 

    Elements.style.height = getHeight(); 

    Element.style.display = 'block'; 

    Elements.style.display = 'block'; 

} 

function hideScreen() 

{ 

    var Element = document.getElementById('Message'); 

    var Elements = document.getElementById('Screen'); 

    Element.style.display = 'none'; 

    Elements.style.display = 'none'; 

} 

</script> 

12 个解决方案

#1

<!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>  
<style>  
html,body{font-size:12px;margin:0px;height:100%;}  
.mesWindow{border:#666 1px solid;background:#fff;}  
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}  
.mesWindowContent{margin:4px;font-size:12px;}  
.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}  
</style>  
<script>  
var isIe=(document.all)?true:false;  
//设置select的可见状态  
function setSelectState(state)  
{  
 var objl=document.getElementsByTagName('select');  
 for(var i=0;i<objl.length;i++)  
 {  
 objl[i].style.visibility=state;  
 }  
}  
function mousePosition(ev)  
 {  
 if(ev.pageX || ev.pageY)  
 {  
 return {x:ev.pageX, y:ev.pageY};  
 }  
 return {  
 x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop  
 };  
 }  
//弹出方法  
function showMessageBox(wTitle,content,pos,wWidth)  
{  
 closeWindow();  
 var bWidth=parseInt(document.documentElement.scrollWidth);  
 var bHeight=parseInt(document.documentElement.scrollHeight);  
 if(isIe){  
 setSelectState('hidden');}  
 var back=document.createElement("div");  
 back.id="back";  
 var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;";  
 styleStr+=(isIe)?"filter:alpha(opacity=40);":"opacity:0.40;";  
 back.style.cssText=styleStr;  
 document.body.appendChild(back);  
 //var mesW=document.createElement("div");  
 //mesW.id="mesWindow";  
 //mesW.className="mesWindow";  
 //mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";  
  
 styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;";  
 //mesW.style.cssText=styleStr;  
 //document.body.appendChild(mesW);  
 setTimeout(function(){closeWindow()},3000);
}  
 function showBackground(obj,endInt)  
{  
 obj.filters.alpha.opacity+=1;  
 if(obj.filters.alpha.opacity<endInt)  
 {  
 setTimeout(function(){showBackground(obj,endInt)},8);  
 }  
}  
//关闭窗口  
function closeWindow()  
{  
 if(document.getElementById('back')!=null)  
 {  
 document.getElementById('back').parentNode.removeChild(document.getElementById('back'));  
 }  
 if(document.getElementById('mesWindow')!=null)  
 {  
 document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));  
 }  
  
 if(isIe){  
 setSelectState('');}  
}  
//测试弹出  
function testMessageBox(ev)  
{  
 var objPos = mousePosition(ev);  
 messContent="<div style='padding:20px 0 20px 0;text-align:center'>消息正文</div>";  
 showMessageBox('窗口标题',messContent,objPos,350);  
}  
</script>  
</head>  
<body onload="testMessageBox(event);">  
<div style="padding:20px">  
<div style="text-align:left";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>  
<div style="text-align:left;padding-left:20px;padding-top:10px";>屏幕用一个灰色的层遮住, 使其不能操作,几秒钟后该层消失, 又能操作了</div>  
<div style="text-align:left;padding-left:20px;padding-top:10px";>以前是一个弹出窗口遮盖功能,改下代码后就变成现在这个样</div> 
</div>  
</body>  
</html>  

#2

用setTimeout函数:多少毫秒后执行另一个函数
如:
setTimeout("scrollStar()",50); 
经过50函数后执行scrollStar()

scrollStar()函数体.编写相应的div层设置display:none

#3

试试setTimeout(hideScreen, time);

#4

这个是原版,会弹出一个窗口, 你的动画放在这个弹出DIV里就可以了.
<!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>  
<style>  
html,body{font-size:12px;margin:0px;height:100%;}  
.mesWindow{border:#666 1px solid;background:#fff;}  
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}  
.mesWindowContent{margin:4px;font-size:12px;}  
.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}  
</style>  
<script>  
var isIe=(document.all)?true:false;  
//设置select的可见状态  
function setSelectState(state)  
{  
 var objl=document.getElementsByTagName('select');  
 for(var i=0;i<objl.length;i++)  
 {  
 objl[i].style.visibility=state;  
 }  
}  
function mousePosition(ev)  
 {  
 if(ev.pageX || ev.pageY)  
 {  
 return {x:ev.pageX, y:ev.pageY};  
 }  
 return {  
 x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop  
 };  
 }  
//弹出方法  
function showMessageBox(wTitle,content,pos,wWidth)  
{  
 closeWindow();  
 var bWidth=parseInt(document.documentElement.scrollWidth);  
 var bHeight=parseInt(document.documentElement.scrollHeight);  
 if(isIe){  
 setSelectState('hidden');}  
 var back=document.createElement("div");  
 back.id="back";  
 var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;";  
 styleStr+=(isIe)?"filter:alpha(opacity=40);":"opacity:0.40;";  
 back.style.cssText=styleStr;  
 document.body.appendChild(back);  
 var mesW=document.createElement("div");  
 mesW.id="mesWindow";  
 mesW.className="mesWindow";  
 mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";  
  
 styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;";  
 mesW.style.cssText=styleStr;  
 document.body.appendChild(mesW);  
}  
 function showBackground(obj,endInt)  
{  
 obj.filters.alpha.opacity+=1;  
 if(obj.filters.alpha.opacity<endInt)  
 {  
 setTimeout(function(){showBackground(obj,endInt)},8);  
 }  
}  
//关闭窗口  
function closeWindow()  
{  
 if(document.getElementById('back')!=null)  
 {  
 document.getElementById('back').parentNode.removeChild(document.getElementById('back'));  
 }  
 if(document.getElementById('mesWindow')!=null)  
 {  
 document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));  
 }  
  
 if(isIe){  
 setSelectState('');}  
}  
//测试弹出  
function testMessageBox(ev)  
{  
 var objPos = mousePosition(ev);  
 messContent="<div style='padding:20px 0 20px 0;text-align:center'>消息正文</div>";  
 showMessageBox('窗口标题',messContent,objPos,350);  
}  
</script>  
</head>  
<body>  
<div style="padding:20px">  
<div style="text-align:left";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>  
<div style="text-align:left;padding-left:20px;padding-top:10px";><select><option>下拉</option></select>弹出窗口时会将其隐藏，关闭时会让其显示，目的是在IE中防止弹出的DIV挡不住下拉框</div>  
<div style="text-align:center";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>  
<div style="text-align:right";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>  
</div>  
</body>  
</html>  

#5

感谢二楼,代码测试OK改了透明度和时间一样可以用.但是代码太复杂,有的地方我不是很明白.
最好是使用我贴出的代码,使用Settimeout的方法

#6

<!DOCTYPE html PUBaC "-//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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dd</title>
<style>
*{ margin:0;}
#Message { background-color:#CCCCCC;}
</style>
<script type="text/javascript"> 
function getWidth() 
{ 
    var strWidth,clientWidth,bodyWidth; 
    clientWidth = document.documentElement.clientWidth; 
    bodyWidth = document.body.clientWidth; 
    if(bodyWidth > clientWidth){ 
        strWidth = bodyWidth + 20; 
    } else { 
        strWidth = clientWidth; 
    } 
    return strWidth; 
} 
//获取高度 
function getHeight() 
{ 
    var strHeight,clientHeight,bodyHeight; 
    clientHeight = document.documentElement.clientHeight; 
    bodyHeight = document.body.clientHeight; 
    if(bodyHeight > clientHeight){ 
        strHeight = bodyHeight + 30; 
    } else { 
        strHeight = clientHeight; 
    } 
    return strHeight; 
} 

function showScreen() 
{ 
    var Element = document.getElementById('Message'); 
    var Elements = document.getElementById('Screen'); 
    Elements.style.width = getWidth(); 
    Elements.style.height = getHeight(); 
    Element.style.display = 'block'; 
    Elements.style.display = 'block'; 
setTimeout(function(){hideScreen()},2000); 
} 
function hideScreen() 
{ 
    var Element = document.getElementById('Message'); 
    var Elements = document.getElementById('Screen'); 
    Element.style.display = 'none'; 
    Elements.style.display = 'none'; 
} 
</script>
</head>

<body onload="showScreen()">
<div id="Message">
<div id="Screen">用你的代码做了一个, 试试效果</div>
</div>
</body>
</body>
</html>

#7

哈哈,我忽然发现这个论坛的"将贴子提前"这个功能就是我想要的类似谁帮忙把它摘出来.

#8

晕倒~~~~ "将贴子提前" 这个功能就是我那个代码....

样式要自己调整的呀

<!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>  
<style>  
html,body{font-size:12px;margin:0px;height:100%;}  
.mesWindow{border:#666 1px solid;background:#fff;}  
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}  
.mesWindowContent{margin:4px;font-size:12px;}  
.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}  
</style>  
<script>  
var isIe=(document.all)?true:false;  
//设置select的可见状态  
function setSelectState(state)  
{  
var objl=document.getElementsByTagName('select');  
for(var i=0;i <objl.length;i++)  
{  
objl[i].style.visibility=state;  
}  
}  
function mousePosition(ev)  
{  
if(ev.pageX || ev.pageY)  
{  
return {x:ev.pageX, y:ev.pageY};  
}  
return {  
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop  
};  
}  
//弹出方法  
function showMessageBox(wTitle,content,pos,wWidth)  
{  
closeWindow();  
var bWidth=parseInt(document.documentElement.scrollWidth);  
var bHeight=parseInt(document.documentElement.scrollHeight);  
if(isIe){  
setSelectState('hidden');}  
var back=document.createElement("div");  
back.id="back";  
var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;";  
styleStr+=(isIe)?"filter:alpha(opacity=40);":"opacity:0.40;";  
back.style.cssText=styleStr;  
document.body.appendChild(back);  
var mesW=document.createElement("div");  
mesW.id="mesWindow";  
mesW.className="mesWindow";  
mesW.innerHTML=" <div class='mesWindowTop'> <table width='100%' height='100%'> <tr> <td>"+wTitle+" </td> <td style='width:1px;'> <input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /> </td> </tr> </table> </div> <div class='mesWindowContent' id='mesWindowContent'>"+content+" </div> <div class='mesWindowBottom'> </div>";  
  
styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;";  
mesW.style.cssText=styleStr;  
document.body.appendChild(mesW);  
}  
function showBackground(obj,endInt)  
{  
obj.filters.alpha.opacity+=1;  
if(obj.filters.alpha.opacity <endInt)  
{  
setTimeout(function(){showBackground(obj,endInt)},8);  
}  
}  
//关闭窗口  
function closeWindow()  
{  
if(document.getElementById('back')!=null)  
{  
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));  
}  
if(document.getElementById('mesWindow')!=null)  
{  
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));  
}  
  
if(isIe){  
setSelectState('');}  
}  
//测试弹出  
function testMessageBox(ev)  
{  
var objPos = mousePosition(ev);  
messContent=" <div style='padding:20px 0 20px 0;text-align:center'>消息正文 </div>";  
showMessageBox('窗口标题',messContent,objPos,350);  
}  
</script>  
</head>  
<body>  
<div style="padding:20px">  
<div style="text-align:left";> <a href="#none" onclick="testMessageBox(event);">弹出窗口 </a> </div>  
<div style="text-align:left;padding-left:20px;padding-top:10px";> <select> <option>下拉 </option> </select>弹出窗口时会将其隐藏，关闭时会让其显示，目的是在IE中防止弹出的DIV挡不住下拉框 </div>  
<div style="text-align:center";> <a href="#none" onclick="testMessageBox(event);">弹出窗口 </a> </div>  
<div style="text-align:right";> <a href="#none" onclick="testMessageBox(event);">弹出窗口 </a> </div>  
</div>  
</body>  
</html>

#9

Cyril_Tam你的修改不错,我一看就明白.但是能不能把"message"上下和水平居中显示呢?

#10

<!DOCTYPE html PUBaC "-//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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dd</title>
<style>
*{ margin:0;}
#Message { background-color:#CCCCCC;}
#Screen{ background-color:red;}
</style>
<script type="text/javascript"> 
function getWidth() 
{ 
    var strWidth,clientWidth,bodyWidth; 
    clientWidth = document.documentElement.clientWidth; 
    bodyWidth = document.body.clientWidth; 
    if(bodyWidth > clientWidth){ 
        strWidth = bodyWidth + 20; 
    } else { 
        strWidth = clientWidth; 
    } 
    return strWidth; 
} 
//获取高度 
function getHeight() 
{ 
    var strHeight,clientHeight,bodyHeight; 
    clientHeight = document.documentElement.clientHeight; 
    bodyHeight = document.body.clientHeight; 
    if(bodyHeight > clientHeight){ 
        strHeight = bodyHeight + 30; 
    } else { 
        strHeight = clientHeight; 
    } 
    return strHeight; 
} 

function showScreen() 
{ 
    var Element = document.getElementById('Message'); 
    var Elements = document.getElementById('Screen'); 
/*修改部份*/
    Element.style.width = getWidth(); 
    Element.style.height = getHeight(); 

Elements.style.width = 500; 
    Elements.style.height = 400;
Elements.style.position = "absolute";
Elements.style.top = (getHeight() - 400)/2;
Elements.style.left = (getWidth() - 500)/2;

/*修改部份*/

    Element.style.display = 'block'; 
    Elements.style.display = 'block'; 
//setTimeout(function(){hideScreen()},2000); 
} 
function hideScreen() 
{ 
    var Element = document.getElementById('Message'); 
    var Elements = document.getElementById('Screen'); 
    Element.style.display = 'none'; 
    Elements.style.display = 'none'; 
} 
</script>
</head>

<body onload="showScreen()">
<div id="Message">
<div id="Screen">用你的代码做了一个, 试试效果</div>
</div>
</body>
</body>
</html>

#11

记得把上面代码setTimeout(function(){hideScreen()},2000); 前的注释去掉

#12

OK,感谢Cyril_Tam,IE7 火狐3测试通过.非常感谢.

#1

<!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>  
<style>  
html,body{font-size:12px;margin:0px;height:100%;}  
.mesWindow{border:#666 1px solid;background:#fff;}  
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}  
.mesWindowContent{margin:4px;font-size:12px;}  
.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}  
</style>  
<script>  
var isIe=(document.all)?true:false;  
//设置select的可见状态  
function setSelectState(state)  
{  
 var objl=document.getElementsByTagName('select');  
 for(var i=0;i<objl.length;i++)  
 {  
 objl[i].style.visibility=state;  
 }  
}  
function mousePosition(ev)  
 {  
 if(ev.pageX || ev.pageY)  
 {  
 return {x:ev.pageX, y:ev.pageY};  
 }  
 return {  
 x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop  
 };  
 }  
//弹出方法  
function showMessageBox(wTitle,content,pos,wWidth)  
{  
 closeWindow();  
 var bWidth=parseInt(document.documentElement.scrollWidth);  
 var bHeight=parseInt(document.documentElement.scrollHeight);  
 if(isIe){  
 setSelectState('hidden');}  
 var back=document.createElement("div");  
 back.id="back";  
 var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;";  
 styleStr+=(isIe)?"filter:alpha(opacity=40);":"opacity:0.40;";  
 back.style.cssText=styleStr;  
 document.body.appendChild(back);  
 //var mesW=document.createElement("div");  
 //mesW.id="mesWindow";  
 //mesW.className="mesWindow";  
 //mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";  
  
 styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;";  
 //mesW.style.cssText=styleStr;  
 //document.body.appendChild(mesW);  
 setTimeout(function(){closeWindow()},3000);
}  
 function showBackground(obj,endInt)  
{  
 obj.filters.alpha.opacity+=1;  
 if(obj.filters.alpha.opacity<endInt)  
 {  
 setTimeout(function(){showBackground(obj,endInt)},8);  
 }  
}  
//关闭窗口  
function closeWindow()  
{  
 if(document.getElementById('back')!=null)  
 {  
 document.getElementById('back').parentNode.removeChild(document.getElementById('back'));  
 }  
 if(document.getElementById('mesWindow')!=null)  
 {  
 document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));  
 }  
  
 if(isIe){  
 setSelectState('');}  
}  
//测试弹出  
function testMessageBox(ev)  
{  
 var objPos = mousePosition(ev);  
 messContent="<div style='padding:20px 0 20px 0;text-align:center'>消息正文</div>";  
 showMessageBox('窗口标题',messContent,objPos,350);  
}  
</script>  
</head>  
<body onload="testMessageBox(event);">  
<div style="padding:20px">  
<div style="text-align:left";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>  
<div style="text-align:left;padding-left:20px;padding-top:10px";>屏幕用一个灰色的层遮住, 使其不能操作,几秒钟后该层消失, 又能操作了</div>  
<div style="text-align:left;padding-left:20px;padding-top:10px";>以前是一个弹出窗口遮盖功能,改下代码后就变成现在这个样</div> 
</div>  
</body>  
</html>  

#2

用setTimeout函数:多少毫秒后执行另一个函数
如:
setTimeout("scrollStar()",50); 
经过50函数后执行scrollStar()

scrollStar()函数体.编写相应的div层设置display:none

#3

试试setTimeout(hideScreen, time);

#4

这个是原版,会弹出一个窗口, 你的动画放在这个弹出DIV里就可以了.
<!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>  
<style>  
html,body{font-size:12px;margin:0px;height:100%;}  
.mesWindow{border:#666 1px solid;background:#fff;}  
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}  
.mesWindowContent{margin:4px;font-size:12px;}  
.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}  
</style>  
<script>  
var isIe=(document.all)?true:false;  
//设置select的可见状态  
function setSelectState(state)  
{  
 var objl=document.getElementsByTagName('select');  
 for(var i=0;i<objl.length;i++)  
 {  
 objl[i].style.visibility=state;  
 }  
}  
function mousePosition(ev)  
 {  
 if(ev.pageX || ev.pageY)  
 {  
 return {x:ev.pageX, y:ev.pageY};  
 }  
 return {  
 x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop  
 };  
 }  
//弹出方法  
function showMessageBox(wTitle,content,pos,wWidth)  
{  
 closeWindow();  
 var bWidth=parseInt(document.documentElement.scrollWidth);  
 var bHeight=parseInt(document.documentElement.scrollHeight);  
 if(isIe){  
 setSelectState('hidden');}  
 var back=document.createElement("div");  
 back.id="back";  
 var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;";  
 styleStr+=(isIe)?"filter:alpha(opacity=40);":"opacity:0.40;";  
 back.style.cssText=styleStr;  
 document.body.appendChild(back);  
 var mesW=document.createElement("div");  
 mesW.id="mesWindow";  
 mesW.className="mesWindow";  
 mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";  
  
 styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;";  
 mesW.style.cssText=styleStr;  
 document.body.appendChild(mesW);  
}  
 function showBackground(obj,endInt)  
{  
 obj.filters.alpha.opacity+=1;  
 if(obj.filters.alpha.opacity<endInt)  
 {  
 setTimeout(function(){showBackground(obj,endInt)},8);  
 }  
}  
//关闭窗口  
function closeWindow()  
{  
 if(document.getElementById('back')!=null)  
 {  
 document.getElementById('back').parentNode.removeChild(document.getElementById('back'));  
 }  
 if(document.getElementById('mesWindow')!=null)  
 {  
 document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));  
 }  
  
 if(isIe){  
 setSelectState('');}  
}  
//测试弹出  
function testMessageBox(ev)  
{  
 var objPos = mousePosition(ev);  
 messContent="<div style='padding:20px 0 20px 0;text-align:center'>消息正文</div>";  
 showMessageBox('窗口标题',messContent,objPos,350);  
}  
</script>  
</head>  
<body>  
<div style="padding:20px">  
<div style="text-align:left";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>  
<div style="text-align:left;padding-left:20px;padding-top:10px";><select><option>下拉</option></select>弹出窗口时会将其隐藏，关闭时会让其显示，目的是在IE中防止弹出的DIV挡不住下拉框</div>  
<div style="text-align:center";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>  
<div style="text-align:right";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>  
</div>  
</body>  
</html>  

#5

感谢二楼,代码测试OK改了透明度和时间一样可以用.但是代码太复杂,有的地方我不是很明白.
最好是使用我贴出的代码,使用Settimeout的方法

#6

<!DOCTYPE html PUBaC "-//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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dd</title>
<style>
*{ margin:0;}
#Message { background-color:#CCCCCC;}
</style>
<script type="text/javascript"> 
function getWidth() 
{ 
    var strWidth,clientWidth,bodyWidth; 
    clientWidth = document.documentElement.clientWidth; 
    bodyWidth = document.body.clientWidth; 
    if(bodyWidth > clientWidth){ 
        strWidth = bodyWidth + 20; 
    } else { 
        strWidth = clientWidth; 
    } 
    return strWidth; 
} 
//获取高度 
function getHeight() 
{ 
    var strHeight,clientHeight,bodyHeight; 
    clientHeight = document.documentElement.clientHeight; 
    bodyHeight = document.body.clientHeight; 
    if(bodyHeight > clientHeight){ 
        strHeight = bodyHeight + 30; 
    } else { 
        strHeight = clientHeight; 
    } 
    return strHeight; 
} 

function showScreen() 
{ 
    var Element = document.getElementById('Message'); 
    var Elements = document.getElementById('Screen'); 
    Elements.style.width = getWidth(); 
    Elements.style.height = getHeight(); 
    Element.style.display = 'block'; 
    Elements.style.display = 'block'; 
setTimeout(function(){hideScreen()},2000); 
} 
function hideScreen() 
{ 
    var Element = document.getElementById('Message'); 
    var Elements = document.getElementById('Screen'); 
    Element.style.display = 'none'; 
    Elements.style.display = 'none'; 
} 
</script>
</head>

<body onload="showScreen()">
<div id="Message">
<div id="Screen">用你的代码做了一个, 试试效果</div>
</div>
</body>
</body>
</html>

#7

哈哈,我忽然发现这个论坛的"将贴子提前"这个功能就是我想要的类似谁帮忙把它摘出来.

#8

晕倒~~~~ "将贴子提前" 这个功能就是我那个代码....

样式要自己调整的呀

<!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>  
<style>  
html,body{font-size:12px;margin:0px;height:100%;}  
.mesWindow{border:#666 1px solid;background:#fff;}  
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}  
.mesWindowContent{margin:4px;font-size:12px;}  
.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}  
</style>  
<script>  
var isIe=(document.all)?true:false;  
//设置select的可见状态  
function setSelectState(state)  
{  
var objl=document.getElementsByTagName('select');  
for(var i=0;i <objl.length;i++)  
{  
objl[i].style.visibility=state;  
}  
}  
function mousePosition(ev)  
{  
if(ev.pageX || ev.pageY)  
{  
return {x:ev.pageX, y:ev.pageY};  
}  
return {  
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop  
};  
}  
//弹出方法  
function showMessageBox(wTitle,content,pos,wWidth)  
{  
closeWindow();  
var bWidth=parseInt(document.documentElement.scrollWidth);  
var bHeight=parseInt(document.documentElement.scrollHeight);  
if(isIe){  
setSelectState('hidden');}  
var back=document.createElement("div");  
back.id="back";  
var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;";  
styleStr+=(isIe)?"filter:alpha(opacity=40);":"opacity:0.40;";  
back.style.cssText=styleStr;  
document.body.appendChild(back);  
var mesW=document.createElement("div");  
mesW.id="mesWindow";  
mesW.className="mesWindow";  
mesW.innerHTML=" <div class='mesWindowTop'> <table width='100%' height='100%'> <tr> <td>"+wTitle+" </td> <td style='width:1px;'> <input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /> </td> </tr> </table> </div> <div class='mesWindowContent' id='mesWindowContent'>"+content+" </div> <div class='mesWindowBottom'> </div>";  
  
styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;";  
mesW.style.cssText=styleStr;  
document.body.appendChild(mesW);  
}  
function showBackground(obj,endInt)  
{  
obj.filters.alpha.opacity+=1;  
if(obj.filters.alpha.opacity <endInt)  
{  
setTimeout(function(){showBackground(obj,endInt)},8);  
}  
}  
//关闭窗口  
function closeWindow()  
{  
if(document.getElementById('back')!=null)  
{  
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));  
}  
if(document.getElementById('mesWindow')!=null)  
{  
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));  
}  
  
if(isIe){  
setSelectState('');}  
}  
//测试弹出  
function testMessageBox(ev)  
{  
var objPos = mousePosition(ev);  
messContent=" <div style='padding:20px 0 20px 0;text-align:center'>消息正文 </div>";  
showMessageBox('窗口标题',messContent,objPos,350);  
}  
</script>  
</head>  
<body>  
<div style="padding:20px">  
<div style="text-align:left";> <a href="#none" onclick="testMessageBox(event);">弹出窗口 </a> </div>  
<div style="text-align:left;padding-left:20px;padding-top:10px";> <select> <option>下拉 </option> </select>弹出窗口时会将其隐藏，关闭时会让其显示，目的是在IE中防止弹出的DIV挡不住下拉框 </div>  
<div style="text-align:center";> <a href="#none" onclick="testMessageBox(event);">弹出窗口 </a> </div>  
<div style="text-align:right";> <a href="#none" onclick="testMessageBox(event);">弹出窗口 </a> </div>  
</div>  
</body>  
</html>

#9

Cyril_Tam你的修改不错,我一看就明白.但是能不能把"message"上下和水平居中显示呢?

#10

<!DOCTYPE html PUBaC "-//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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dd</title>
<style>
*{ margin:0;}
#Message { background-color:#CCCCCC;}
#Screen{ background-color:red;}
</style>
<script type="text/javascript"> 
function getWidth() 
{ 
    var strWidth,clientWidth,bodyWidth; 
    clientWidth = document.documentElement.clientWidth; 
    bodyWidth = document.body.clientWidth; 
    if(bodyWidth > clientWidth){ 
        strWidth = bodyWidth + 20; 
    } else { 
        strWidth = clientWidth; 
    } 
    return strWidth; 
} 
//获取高度 
function getHeight() 
{ 
    var strHeight,clientHeight,bodyHeight; 
    clientHeight = document.documentElement.clientHeight; 
    bodyHeight = document.body.clientHeight; 
    if(bodyHeight > clientHeight){ 
        strHeight = bodyHeight + 30; 
    } else { 
        strHeight = clientHeight; 
    } 
    return strHeight; 
} 

function showScreen() 
{ 
    var Element = document.getElementById('Message'); 
    var Elements = document.getElementById('Screen'); 
/*修改部份*/
    Element.style.width = getWidth(); 
    Element.style.height = getHeight(); 

Elements.style.width = 500; 
    Elements.style.height = 400;
Elements.style.position = "absolute";
Elements.style.top = (getHeight() - 400)/2;
Elements.style.left = (getWidth() - 500)/2;

/*修改部份*/

    Element.style.display = 'block'; 
    Elements.style.display = 'block'; 
//setTimeout(function(){hideScreen()},2000); 
} 
function hideScreen() 
{ 
    var Element = document.getElementById('Message'); 
    var Elements = document.getElementById('Screen'); 
    Element.style.display = 'none'; 
    Elements.style.display = 'none'; 
} 
</script>
</head>

<body onload="showScreen()">
<div id="Message">
<div id="Screen">用你的代码做了一个, 试试效果</div>
</div>
</body>
</body>
</html>

#11

记得把上面代码setTimeout(function(){hideScreen()},2000); 前的注释去掉

#12

OK,感谢Cyril_Tam,IE7 火狐3测试通过.非常感谢.
标签：

相关文章