请教一下登录界面的弹出是怎么制作的？

Question

     如题，点击页面上的登录按钮，弹出登录窗口，此时后面的页面不能再操作，这个是怎么实现的，求详解。。

Answer 1

#addDiv {
position: absolute;
top: 300px;
left: 550px;
border: 5px solid #ff9224;
display: none;
width: 470px;
height: 300px;
background: #e3f0f9;
color: black;
z-index: 2;
text-align: center;
overflow: auto;
}.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #EEEEEE;
z-index: 1;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity =   80);
}
function showLogin() {
var addDiv = document.getElementById("addDiv");
addDiv.style.display = "block";
document.getElementById("fade").style.display = "block";
}
function hideLogin() {
var addDiv = document.getElementById("addDiv");
addDiv.style.display = 'none';
document.getElementById("fade").style.display = "none";
}
<div id="addDiv">这里写登陆的</div><div id="fade" class="black_overlay">
希望对你有帮助！！

Answer 2

这个用模态窗口在实现，给一段代码楼主参考：
var url = encodeURI('fawensearchRoles.action?parameters='+ parameters);
var obj = new Object();
obj = window.showModalDialog(url,window,"dialogWidth=500px;dialogHeight=400px");
encodeURI 是用来转码防止出现中文乱码的。
fawensearchRoles.action 也可以写成 login.jsp..  

Answer 3

里面写登陆的html的标签啊‘
用户名：<input....>
密码：<input...>
提交啊登陆按钮处设置onclick事件调用showLogin() 这个方法
逻辑不复杂哈

Answer 4

鄙人以前写过，我给你说一下大概思路，你Jquery吗?不会就算了，那么办法。
jquery中有个diog  这个方法你自己百度一下啊.....

Answer 5

用框架的话可以用jqueryui的dialog或者colorbox也不错啊
如果不用框架，自己写的话。。给你贴个简单的<div id="backDiv" style="display:none;filter:alpha(opacity=50);opacity:0.5;-moz-opacity:0.5;position:fixed;_position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;z-index:1;">
<iframe style="position:absolute;filter:alpha(opacity=0);opacity:0;-moz-opacity:0;left:0;top:0;width:100%;height:99%;"></iframe>
</div>
<div id="loginDiv" style="display:none;width:830px;height:470px;">
    <h1>登录</h1>
    <input type="button" value="close" onclick="close()" />
</div>
<script type="text/javascript">
    var backDiv = document.getElementById("backDiv");
    var loginDiv = document.getElementById("loginDiv");
    window.onload = function() {
        // 弹出登录页面
     var wHeight = document.body.offsetHeight;
     var wWidth = document.body.offsetWidth;
        var top = (wHeight - parseInt(loginDiv.style.height, 10)) / 2;
        var left = (wWidth - parseInt(loginDiv.style.width, 10)) / 2;        backDiv.style.display = "block";
        backDiv.style.height = wHeight;
        backDiv.style.width = wWidth;
        backDiv.style.position = "absolute";        loginDiv.style.display = "block";
        
        loginDiv.style.border = "#ccc 8px solid";
loginDiv.style.position = "absolute";
loginDiv.style.top = top + "px";
loginDiv.style.left = left + "px";
    }    function close() {
        backDiv.style.display = "none";
        loginDiv.style.display = "none";
    }
</script>

Answer 6

ms 漏了个style
<style type="text/css">
#loginDiv { overflow:hidden; z-index:2; } 
</style>

Answer 7

如果你是动态JSP页面的话，那还好，就是用一个href把那个登录做个连接，连接到登录界面就行了啊！或者用<form action="(登录界面)">就好啦！