怎么实现页面变暗,所有操作都不能执行的功能
日期：2014-05-16 浏览次数：20437 次
如何实现页面变暗,所有操作都不能执行的功能
我在163.com邮件中,见到出现错误提示时,是一个类似于模式窗体的层,这个层出现的时候,页面上的其它元素都不能使用了,整个页面都变暗了,就像出现了模式窗体一样,只有出现的那个层中的东西能点击,这个层关闭后,页面的其它功能就又能使用了.
------解决方案--------------------
给你一个JS版的
<script>
var timer
var Opacity = 0
function hide() {
oDiv.style.display = "block "
oDiv.style.height = document.body.scrollHeight
Opacity = 0
event.srcElement.blur()
timer = window.setInterval( "aa() ", 5)
}
function aa()
{
if (Opacity == 50)
{
window.clearInterval(timer)
oButton.style.display = "block "
return
}
Opacity = ( Opacity + 3 ) > 50 ? 50 : Opacity + 3
oDiv.style.filter = "Alpha(Opacity= " + Opacity + ") "
}
function bb()
{
if (Opacity == 0)
{
window.clearInterval(timer)
oDiv.style.display = "none "
return
}
Opacity = (Opacity - 3 < 0) ? 0 : Opacity - 3
oDiv.style.filter = "Alpha(Opacity= " + Opacity + ") "
}
function cc()
{
timer = window.setInterval( 'bb() ', 5);
oButton.style.display= 'none ';
}
</script>
<body topmargin=0 leftmargin=0>
<div id=oDiv style= "position:absolute;z-index:99; background-color:darkgray; Filter: Alpha(Opacity=0); border:1px solid #333333;display:none;width:100%;vertical-align:center;text-align:center "> </div>
<button onclick=hide()> hide </button>
<button id=oButton style= "position:absolute; left:100;top:200;z-index:100;display:none " onclick= "cc() "> 确定 </button>
<script>
for (var i=0; i <30; i++)
document.write ( " <p> 123 </p> ")
</script>
------解决方案--------------------
tab + enter 可以使用后面的东西。
上面放个层。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<html>
<head>
<title> New Document </title>
<meta name= "Generator " content= "EditPlus ">
<meta name= "Author " content= " ">
<meta name= "Keywords " content= " ">
<meta name= "Description " content= " ">
</head>
<body>
<input type= "text " name= " "> <textarea name= " " rows= " " cols= " "> </textarea> <input type= "password "> <input type= "radio " name= " "> <input type= "reset "> <input type= "submit ">
<script language= "JavaScript ">
<!--
var ie = window.navigator.userAgent.indexOf( "MSIE ") != -1;
var _div = document.createElement( "DIV ");
with(_div.style){
position = "absolute ";
zIndex = 100;
top = "0 ";
left = "0 ";
width = "100% ";
height = document.body.scrollHeight + "px ";
backgroundColor = "#ffffff ";
if(ie){
filter = "Alpha(Opacity=50) ";//0完全透明
}else{
MozOpacity = 0.5;//0.0完全透明
}
}
document.body.appendChild(_div);
//-->
</script>
</body>
</html>
我在163.com邮件中,见到出现错误提示时,是一个类似于模式窗体的层,这个层出现的时候,页面上的其它元素都不能使用了,整个页面都变暗了,就像出现了模式窗体一样,只有出现的那个层中的东西能点击,这个层关闭后,页面的其它功能就又能使用了.
------解决方案--------------------
给你一个JS版的
<script>
var timer
var Opacity = 0
function hide() {
oDiv.style.display = "block "
oDiv.style.height = document.body.scrollHeight
Opacity = 0
event.srcElement.blur()
timer = window.setInterval( "aa() ", 5)
}
function aa()
{
if (Opacity == 50)
{
window.clearInterval(timer)
oButton.style.display = "block "
return
}
Opacity = ( Opacity + 3 ) > 50 ? 50 : Opacity + 3
oDiv.style.filter = "Alpha(Opacity= " + Opacity + ") "
}
function bb()
{
if (Opacity == 0)
{
window.clearInterval(timer)
oDiv.style.display = "none "
return
}
Opacity = (Opacity - 3 < 0) ? 0 : Opacity - 3
oDiv.style.filter = "Alpha(Opacity= " + Opacity + ") "
}
function cc()
{
timer = window.setInterval( 'bb() ', 5);
oButton.style.display= 'none ';
}
</script>
<body topmargin=0 leftmargin=0>
<div id=oDiv style= "position:absolute;z-index:99; background-color:darkgray; Filter: Alpha(Opacity=0); border:1px solid #333333;display:none;width:100%;vertical-align:center;text-align:center "> </div>
<button onclick=hide()> hide </button>
<button id=oButton style= "position:absolute; left:100;top:200;z-index:100;display:none " onclick= "cc() "> 确定 </button>
<script>
for (var i=0; i <30; i++)
document.write ( " <p> 123 </p> ")
</script>
------解决方案--------------------
tab + enter 可以使用后面的东西。
上面放个层。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<html>
<head>
<title> New Document </title>
<meta name= "Generator " content= "EditPlus ">
<meta name= "Author " content= " ">
<meta name= "Keywords " content= " ">
<meta name= "Description " content= " ">
</head>
<body>
<input type= "text " name= " "> <textarea name= " " rows= " " cols= " "> </textarea> <input type= "password "> <input type= "radio " name= " "> <input type= "reset "> <input type= "submit ">
<script language= "JavaScript ">
<!--
var ie = window.navigator.userAgent.indexOf( "MSIE ") != -1;
var _div = document.createElement( "DIV ");
with(_div.style){
position = "absolute ";
zIndex = 100;
top = "0 ";
left = "0 ";
width = "100% ";
height = document.body.scrollHeight + "px ";
backgroundColor = "#ffffff ";
if(ie){
filter = "Alpha(Opacity=50) ";//0完全透明
}else{
MozOpacity = 0.5;//0.0完全透明
}
}
document.body.appendChild(_div);
//-->
</script>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
