- 先来看看效果吧
- 初始情况下
2.点击登陆按钮
3.点击close按钮，或者单击灰色区域后，登陆窗口会消失。
- html结构
<body>
<span class="btn" id="BTN">login</span>
</body>
- css样式
*{
margin: 0;
padding: 0;
}
.btn{
position: absolute;
top: 50px;
right: 100px;
display: block;
width: 100px;
height: 50px;
background-color: #ccc;
line-height: 50px;
text-align: center;
cursor: pointer;
}
#login{
z-index: 3;
width: 500px;
height: 500px;
border: 1px solid #fff;
position: fixed;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -250px;
background-color: #ccc;
}
.close{
position: absolute;
top: 10px;
right: 20px;
display: block;
width: 80px;
height: 40px;border: 1px solid #666;
line-height: 40px;
text-align: center;
cursor: pointer;
}
#BG{
background-color: rgba(0,0,0,0.6);
z-index: 2;
}
- javascript代码
<script type="text/javascript">
function openlogin(){
var sWidth=window.screen.width;
var sHeight=window.screen.height;
var BG = document.createElement("div");
BG.id = "BG";
BG.style.height=sHeight + "px";
BG.style.width=sWidth + "px";
document.body.appendChild(BG);
var login = document.createElement("div");
login.id="login";
login.innerHTML = "<span class=‘close‘ id=‘CLOSE‘>close</span>";
document.body.appendChild(login);
var close = document.getElementById("CLOSE");
close.onclick = BG.onclick = function(){
document.body.removeChild(BG);
document.body.removeChild(login);
};
};
window.onload = function(){
var btn = document.getElementById("BTN");
btn.onclick=function(){
openlogin();
return false;
}
}
</script>
至此，弹出登陆框的效果基本实现。
时间： 2024-12-15 01:33:33