如何实现新浪博客中弹出登陆DIV时，页面中其他部分变成灰色并且不可点击
日期：2014-05-16 浏览次数：20333 次
怎么实现新浪博客中弹出登陆DIV时，页面中其他部分变成灰色并且不可点击
比如这个网页中 http://blog.sina.com.cn/u/1316903627
当点击给他的好友发纸条的时候
就会在页面中间弹出一个登陆框 此时页面中其他地方全部变成灰色并且不可用了
请问这个怎么实现？
------解决方案--------------------
以前在网上看到过的一个,至少其它按扭不可点击你自己再写个函数把属性设为不可用就可以了
不过记得在点取消时要设回来哦
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>模拟注销</title>
<style>
body{margin:0;padding:0;}
#topFill{display:none;text-align:center;position:absolute;z-index = 999;filter:alpha(opacity=50);background-color:#eee;opacity: 0.5;-moz-opacity: 0.5;width:100%;}
#alertBox{margin:auto;height:150px;width:300px;background-color:#cf0;text-align:left;border:1px solid #666}
#alertTitle{height:20px;background-color:#0000ff;line-height:20px;padding:0 10px;border-bottom:1px solid #71860D}
#alertContent{padding:42px 0;;text-align:center;}
#alertBtn{text-align:center;}
#alertBtn input{margin:0 10px;background:#FFFF99;border:1px solid #fff;height:20px;line-height:20px;}
</style>
<script type="text/javascript" >
//document.documentElement.clientHeight+'px'
// onload的时候声明对象
var obj = new Object;
function oload(){
obj = document.getElementById('topFill');
obj.style.display = 'none';
}
function cl(){
document.body.style.overflow = 'hidden';
document.body.style.height = document.documentElement.clientHeight + 'px';
obj.style.display = 'block';
obj.style.height = document.documentElement.clientHeight + 'px';
}
function bcl(){
document.body.style.overflow = '';
obj.style.display = 'none';
}
function oresize(){
if(obj.style.display != 'block'){
}else{
cl();
}
}
function isno(str){
if (str == 'yes'){
window.close();
}else {
bcl();
}
}
</script>
</head>
<body onload="oload()" onresize="oresize()">
<div id="topFill">
<div id="alertBox">
<div id="alertTitle">警告</div>
<div id="alertContent">退出?</div>
<div id="alertBtn"><input type="button" value="是(Y)" onclick="isno('yes')" /><input type="button" value="否(N)" onclick="isno('no')" /></div>
</div>
</div>
<input type="text" id="textaaa" />
<input type="button" value="注销" onclick="cl()"/>
<br>
<br /><br /><Br /><br /><br /><BR /><br /><br /><Br /><br /><br /><BR />sssdfdf
<br /><br /><Br /><br /><br /><BR /><br /><br /><Br /><br /><br /><BR />
<br /><br /><Br /><br /><br /><BR /><br /><br /><Br /><br /><br /><BR />
<br /><br /><Br /><br /><br /><BR /><br /><br /><Br /><br /><br /><BR />
<br /><br /><Br /><br /><br
比如这个网页中 http://blog.sina.com.cn/u/1316903627
当点击给他的好友发纸条的时候
就会在页面中间弹出一个登陆框 此时页面中其他地方全部变成灰色并且不可用了
请问这个怎么实现？
------解决方案--------------------
以前在网上看到过的一个,至少其它按扭不可点击你自己再写个函数把属性设为不可用就可以了
不过记得在点取消时要设回来哦
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>模拟注销</title>
<style>
body{margin:0;padding:0;}
#topFill{display:none;text-align:center;position:absolute;z-index = 999;filter:alpha(opacity=50);background-color:#eee;opacity: 0.5;-moz-opacity: 0.5;width:100%;}
#alertBox{margin:auto;height:150px;width:300px;background-color:#cf0;text-align:left;border:1px solid #666}
#alertTitle{height:20px;background-color:#0000ff;line-height:20px;padding:0 10px;border-bottom:1px solid #71860D}
#alertContent{padding:42px 0;;text-align:center;}
#alertBtn{text-align:center;}
#alertBtn input{margin:0 10px;background:#FFFF99;border:1px solid #fff;height:20px;line-height:20px;}
</style>
<script type="text/javascript" >
//document.documentElement.clientHeight+'px'
// onload的时候声明对象
var obj = new Object;
function oload(){
obj = document.getElementById('topFill');
obj.style.display = 'none';
}
function cl(){
document.body.style.overflow = 'hidden';
document.body.style.height = document.documentElement.clientHeight + 'px';
obj.style.display = 'block';
obj.style.height = document.documentElement.clientHeight + 'px';
}
function bcl(){
document.body.style.overflow = '';
obj.style.display = 'none';
}
function oresize(){
if(obj.style.display != 'block'){
}else{
cl();
}
}
function isno(str){
if (str == 'yes'){
window.close();
}else {
bcl();
}
}
</script>
</head>
<body onload="oload()" onresize="oresize()">
<div id="topFill">
<div id="alertBox">
<div id="alertTitle">警告</div>
<div id="alertContent">退出?</div>
<div id="alertBtn"><input type="button" value="是(Y)" onclick="isno('yes')" /><input type="button" value="否(N)" onclick="isno('no')" /></div>
</div>
</div>
<input type="text" id="textaaa" />
<input type="button" value="注销" onclick="cl()"/>
<br>
<br /><br /><Br /><br /><br /><BR /><br /><br /><Br /><br /><br /><BR />sssdfdf
<br /><br /><Br /><br /><br /><BR /><br /><br /><Br /><br /><br /><BR />
<br /><br /><Br /><br /><br /><BR /><br /><br /><Br /><br /><br /><BR />
<br /><br /><Br /><br /><br /><BR /><br /><br /><Br /><br /><br /><BR />
<br /><br /><Br /><br /><br
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
