百度的登陆框是如何实现的呢？能贴点代码不
日期：2014-05-17 浏览次数：20384 次
百度的登陆框是怎么实现的呢？能贴点代码不？
百度的登陆框是怎么实现的呢？能贴点代码不？
------解决方案--------------------
首先是思路：我们知道div作为一个层容器是有层等级的即样式中的z-index属性 值越大 显示的越靠前 即z-index=100的显示在z-index=99的上面
那么我们只需要2个层即可 第一个层 设置z-index为50（其实随便的 只要比默认的body大就可以 默认的body浏览器不同z-index值也不同 不过我们弄大点就好了）长跟宽为当前窗体的长宽（注意不要这个值不能是固定 如果打开的时候不是最大化 那么当最大化的时候 该层的边缘就覆盖不住下面的内容了 就是你看到的阴影部分）lockDiv.style.width=document.body.scrollWidth这样定义即可 第二个层 z-index的值只要大于50就可以了 然后内容 就是我们看到的登陆窗了 在一个div中做登陆功能 我就不多说
了位置也是根据当前窗体的大小来设置只要除以一个比例即可做到居中活着用<count>控件（这个。。没试过）思路就是这样了
例子：
前台：
<html>
<head>
<title></title>
<style type="text/css">
<!--
//css
body {//设置body
font-size: 10px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
z-index:1;
}
#suoding {//设置第一个层 就是阴影部分
position:absolute;
text-align:center;
left:0px;
top:0px;
z-index:50;
background-color: #CCCCCC;
filter:alpha(opacity=60);
display:none;
}
#warn {//第二个层 登陆部分
position:absolute;
text-align:center;
left:0px;
top:0px;
z-index:100;
display:none;
}//长跟宽因为是需要动态的根据浏览器设置所以需要一点点脚本
-->
<script language="javascript" type="text/javascript">
function _div()
{
var lockDiv = document.getElementById("suoding");
var MsgWindow = document.getElementById("warn");
lockDiv.style.left=0;
lockDiv.style.top=0;
lockDiv.style.width=document.body.scrollWidth ;
lockDiv.style.height=document.body.scrollHeight;
lockDiv.style.display="block";
MsgWindow.style.top=document.body.scrollHeight/7;
MsgWindow.style.left=document.body.scrollWidth/8;
MsgWindow.style.display="block";
}
function _close()
{
var lockDiv = document.getElementById("suoding");
var MsgWindow = document.getElementById("warn");
lockDiv.style.display="none";
MsgWindow.style.display="none";
}
</script>
</style>
</head>
<body>
<div>.......随便的内容
<input id="Button1" type="button" value="登陆" onclick="_div()" />
</div>
<div id="suoding"></div>//该层无需任何代码 放这就行了
<div id="warn">。。。你登陆窗的内容
<input id="Button1" type="button" value="退出" onclick="_close()" />
//退出按钮 此方法应在你的登陆成功后也调用一次 让这2个层隐藏
</div>
</body>
</html>
百度的登陆框是怎么实现的呢？能贴点代码不？
------解决方案--------------------
首先是思路：我们知道div作为一个层容器是有层等级的即样式中的z-index属性 值越大 显示的越靠前 即z-index=100的显示在z-index=99的上面
那么我们只需要2个层即可 第一个层 设置z-index为50（其实随便的 只要比默认的body大就可以 默认的body浏览器不同z-index值也不同 不过我们弄大点就好了）长跟宽为当前窗体的长宽（注意不要这个值不能是固定 如果打开的时候不是最大化 那么当最大化的时候 该层的边缘就覆盖不住下面的内容了 就是你看到的阴影部分）lockDiv.style.width=document.body.scrollWidth这样定义即可 第二个层 z-index的值只要大于50就可以了 然后内容 就是我们看到的登陆窗了 在一个div中做登陆功能 我就不多说
了位置也是根据当前窗体的大小来设置只要除以一个比例即可做到居中活着用<count>控件（这个。。没试过）思路就是这样了
例子：
前台：
<html>
<head>
<title></title>
<style type="text/css">
<!--
//css
body {//设置body
font-size: 10px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
z-index:1;
}
#suoding {//设置第一个层 就是阴影部分
position:absolute;
text-align:center;
left:0px;
top:0px;
z-index:50;
background-color: #CCCCCC;
filter:alpha(opacity=60);
display:none;
}
#warn {//第二个层 登陆部分
position:absolute;
text-align:center;
left:0px;
top:0px;
z-index:100;
display:none;
}//长跟宽因为是需要动态的根据浏览器设置所以需要一点点脚本
-->
<script language="javascript" type="text/javascript">
function _div()
{
var lockDiv = document.getElementById("suoding");
var MsgWindow = document.getElementById("warn");
lockDiv.style.left=0;
lockDiv.style.top=0;
lockDiv.style.width=document.body.scrollWidth ;
lockDiv.style.height=document.body.scrollHeight;
lockDiv.style.display="block";
MsgWindow.style.top=document.body.scrollHeight/7;
MsgWindow.style.left=document.body.scrollWidth/8;
MsgWindow.style.display="block";
}
function _close()
{
var lockDiv = document.getElementById("suoding");
var MsgWindow = document.getElementById("warn");
lockDiv.style.display="none";
MsgWindow.style.display="none";
}
</script>
</style>
</head>
<body>
<div>.......随便的内容
<input id="Button1" type="button" value="登陆" onclick="_div()" />
</div>
<div id="suoding"></div>//该层无需任何代码 放这就行了
<div id="warn">。。。你登陆窗的内容
<input id="Button1" type="button" value="退出" onclick="_close()" />
//退出按钮 此方法应在你的登陆成功后也调用一次 让这2个层隐藏
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
