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

[suibian992]

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

[zh919919]

B/S结构一般是用层来实现的

[cuihuaming198809]

#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"> 希望对你有帮助！！

[骤逝]

使用模式对话框

[dw_java08]

这个用模态窗口在实现，给一段代码楼主参考： 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..

[suibian992]

引用 2 楼 cuihuaming198809 的回复:

#addDiv { position: absolute; top: 300px; left: 550px; border: 5px solid #ff9224; display: none; width: 470px; height: 300px; background: #e3f0f9; color: black; z-index: 2; tex……

能具体讲一下怎么实现的吗？

[cuihuaming198809]

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

[farmer-it]

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

[frog8659]

用框架的话可以用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>

[frog8659]

引用 8 楼 frog8659 的回复:

用框架的话可以用jqueryui的dialog或者colorbox也不错啊 如果不用框架，自己写的话。。给你贴个简单的 XML/HTML code?123456789101112131415161718192021222324252627282930313233343536<div id="backDiv" style="display:none;filter:alp……

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

[suibian992]

谢谢大家的热心帮忙哈，已经基本搞定，但还是不知道怎么把弹出页面的空白设成阴影，像很多网站那样。。。

[Ei_Sovellu]

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