2.点击登陆按钮
3.点击close按钮，或者单击灰色区域后，登陆窗口会消失。
<body> <span class="btn" id="BTN">login</span> </body>
*{ 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; }
<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>
至此，弹出登陆框的效果基本实现。
原文：http://www.cnblogs.com/zhuyinxiaozi/p/5514295.html