主要应用到的是dispaly:none 和 dispaly:block;来控制实现的；
<a id="link" href="#" onclick="linkonclick()">登录</a>这里还有一种写法
<a href="javascript:linkonclick()">登录</a>
两种效果是一样的；
View Code
<!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 type="text/css">
*
{
margin: 0px;
padding: 0px;
}
body
{
background-image: url("../Images/Lv.gif");
font-size: 12px;
}
body a
{
font-size: 100px;
color: #FFF;
text-decoration: none;
}
.login
{
background: #FFF;
width: 560px;
height: 360px;
position: absolute;
top: 310px;
left: 510px;
padding: 10px;
z-index: 20;
display: none;
}
.login ul
{
list-style: none;
margin-left: 100px;
margin-top: 50px;
}
.clear
{
background: #FFF;
display: none;
width: 600px;
height: 400px;
position: absolute;
top: 300px;
left: 500px;
z-index: 10;
filter: alpha(opacity=40);
opacity: 0.4;
}
</style>
<script type="text/javascript" language="javascript">
function linkonclick() {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var newdiv = divs[i];
newdiv.style.display = "block";
}
}
function btnclick() {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var newdiv = divs[i];
newdiv.style.display = "none";
}
}
</script>
</head>
<body>
<a id="link" href="#" onclick="linkonclick()">登录</a>
<div class="login">
<ul>
<li>
<p>
用户名:</p>
<input id="Text1" type="text" />
</li>
<li>
<p>
密 码:</p>
<input id="Text2" type="text" />
</li>
<li>
<input id="button" type="button" value="关闭" onclick="btnclick()" /></li>
</ul>
</div>
<div class="clear">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>点击超链接弹出层</title>
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
body
{
background-image: url("../Images/Lv.gif");
font-size: 12px;
}
body a
{
font-size: 100px;
color: #FFF;
text-decoration: none;
}
.login
{
background: #FFF;
width: 560px;
height: 360px;
position: absolute;
top: 310px;
left: 510px;
padding: 10px;
z-index: 20;
display: none;
}
.login ul
{
list-style: none;
margin-left: 100px;
margin-top: 50px;
}
.clear
{
background: #FFF;
display: none;
width: 600px;
height: 400px;
position: absolute;
top: 300px;
left: 500px;
z-index: 10;
filter: alpha(opacity=40);
opacity: 0.4;
}
</style>
<script type="text/javascript" language="javascript">
function linkonclick() {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var newdiv = divs[i];
newdiv.style.display = "block";
}
}
function btnclick() {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var newdiv = divs[i];
newdiv.style.display = "none";
}
}
</script>
</head>
<body>
<a id="link" href="#" onclick="linkonclick()">登录</a>
<div class="login">
<ul>
<li>
<p>
用户名:</p>
<input id="Text1" type="text" />
</li>
<li>
<p>
密 码:</p>
<input id="Text2" type="text" />
</li>
<li>
<input id="button" type="button" value="关闭" onclick="btnclick()" /></li>
</ul>
</div>
<div class="clear">
</div>
</body>
</html>