很多人都想要这种仿迅雷博客用户登陆弹出窗口，所以就自己做了个。其实方法很简单的，就是要建立一个层(DIV)，或者事先已经建好这个层，然后先隐藏，等用户点击登陆的时候再显示出来。背景也用一个层来覆盖整个屏幕，然后用滤镜把透明度调整下就行了。
现在我们就一起来实现这种效果，首先在你需要显示用户登陆的地方添加以下代码： <div id="loginform"><a href="#" onclick="javascript:Login(true);">用户登陆</a></div>
其中javascript:Login()中的参数是控制是否有背景层的，ture是有背景层，false是无背景层。点击这里演示：用户登陆(有背景层) 用户登陆(无背景层)
然后编写css代码： /*---------- 用户登陆*/
* {
padding: 0px;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
html, body{
text-align: center;
width: 100%;
font-size: 12px;
}
a:link, a:visited {
text-decoration: none;
}
a:hover{
text-decoration:underline;
}
ul {
list-style: none;
}
img {
border: 0px;
vertical-align:middle;
}
#loginform{
display:inline;
}
#loginform span a{
color:#FF0000;
font-weight:bold;
}
#floatDiv {
background: #EEF7FE;
border: 1px #B8D2F5 solid;
}
#headDiv{
height:30px;
background-color:#E9F1FC;
cursor:move;
}
#headDiv h3{
font-size: 14px;
font-weight: bold;
color: #1A73C5;
float:left;
text-indent:10px;
line-height:30px;
}
#headDiv span {
margin-right:6px;
margin-top:7px;
float:right;
}
#bodyDiv {
margin:0px 6px 6px 6px;
padding:10px;
background: #FFF;
border: 1px #D9E9F9 solid;
clear:both;
line-height:32px;
}
#bodyDiv a{
color:#666;
}
#bodyDiv ul{
width:200px;
color:#1973C1;
margin-bottom:6px;
vertical-align:middle;
}
#bodyDiv .tbx{
border:1px #B7D1F4 solid;
width:125px;
height:18px;
}
#bodyDiv .code{
border:1px #B7D1F4 solid;
width:60px;
height:18px;
}
#bodyDiv .submit{
width:58px;
height:19px;
border:0px;
background:url(images/login.gif) no-repeat;
}
接着用JavaScript来生成一个id为floatDiv的层，您也可以事先在html中写好代码了，然后把它隐藏，在调用的时候把它显示出来就行了，这样做比较简单一点。但是在这里我们采用第JavaScript生成的方法。代码如下： <script type="text/javascript">
function $(elem){
return document.getElementById(elem);
}
function Login(isbackDiv){
if($('floatDiv')==null){
var floatDiv = document.createElement('div');
floatDiv.id = "floatDiv";
floatDiv.style.position = "absolute";
floatDiv.style.width = 300 + "px";
floatDiv.style.height = 200 + "px";
floatDiv.style.left = (document.documentElement.clientWidth/2 + document.documentElement.scrollLeft - 150) +"px";
floatDiv.style.top = (document.documentElement.clientHeight/2 + document.documentElement.scrollTop - 100) +"px";
floatDiv.style.zIndex = 1001;
//登陆界面代码,http://www.pc123.org原创制作
var loginText = "<div id=\"headDiv\" onmousedown=\"moveDiv(event,'floatDiv');\"><h3>用户登陆</h3><span><a href=\"javascript:void(null)\" onclick=\"CloseFloatDiv('floatDiv')\"><img src=\"images/close.gif\" alt=\"关闭窗口\" /></a></span></div>";
loginText += "<div id=\"bodyDiv\">";
loginText += "<form name='form1' method='post' action='/member/login.php'>";
loginText += "<input type=\"hidden\" name=\"fmdo\" value=\"login\" />";
loginText += "<input type=\"hidden\" name=\"dopost\" value=\"login\" />";
loginText += "<input type=\"hidden\" name=\"gourl\" value=\"\" />";
loginText += "<ul><li>用户名：<input name=\"userid\" class=\"tbx\" type=\"text\" maxlength=\"20\" /></li>";
loginText += "<li>密 码：<input name=\"pwd\" class=\"tbx\" type=\"password\" maxlength=\"20\" /></li>";
loginText += "<li>验证码：<input name=\"vdcode\" class=\"code\" type=\"text\" size=\"4\" maxlength=\"4\" /> ";
loginText += "<img src=\"http://www.pc123.org/include/validateimg.php\" onclick=\"src='http://www.pc123.org/include/validateimg.php?r='+Math.random()\" style=\"cursor:pointer\" alt=\"看不清验证码？点击图片刷新\" />";
loginText += "</li></ul>";
loginText += "<input type=\"submit\" class=\"submit\" value=\"\" /> ";
loginText += "<a href=\"http://www.pc123.org\" target=\"_blank\">注册新用户</a>";
loginText += "</div>";
floatDiv.innerHTML = loginText;
document.body.appendChild(floatDiv);
}
else{
$('floatDiv').style.display = "block";
}
if($('backDiv')==null && isbackDiv ==true){
var backDiv = document.createElement('div');
backDiv.id = "backDiv";
backDiv.style.backgroundColor = "Black";
backDiv.style.filter = "alpha(opacity=70)";
backDiv.style.MozOpacity = "0.70";
backDiv.style.position = "absolute";
backDiv.style.left = "0px";
backDiv.style.top = "0px";
backDiv.style.width = Math.max(document.body.scrollWidth, document.documentElement.clientWidth) +"px";
backDiv.style.height = Math.max(document.body.scrollHeight, document.documentElement.clientHeight)+"px";
document.body.appendChild(backDiv);
$('backDiv').style.zIndex = 1000;
}
else if(isbackDiv ==true){
$('backDiv').style.display = "block";
}
}
function moveDiv(event, elem)
{
$('floatDiv').style.filter = "alpha(opacity=50)";
var oObj = $(elem);
oObj.onmousemove = mousemove;
oObj.onmouseup = mouseup;
oObj.setCapture ? oObj.setCapture() : function(){};
oEvent = window.event ? window.event : event;
var dragData = {x : oEvent.clientX, y : oEvent.clientY};
var backData = {x : parseInt(oObj.style.top), y : parseInt(oObj.style.left)};
function mousemove()
{
var oEvent = window.event ? window.event : event;
var iLeft = oEvent.clientX - dragData["x"] + parseInt(oObj.style.left);
var iTop = oEvent.clientY - dragData["y"] + parseInt(oObj.style.top);
oObj.style.left = iLeft;
oObj.style.top = iTop;
dragData = {x: oEvent.clientX, y: oEvent.clientY};
}
function mouseup()
{
var oEvent = window.event ? window.event : event;
oObj.onmousemove = null;
oObj.onmouseup = null;
$('floatDiv').style.filter = "";
if(oEvent.clientX < 1 || oEvent.clientY < 1)
{
oObj.style.left = backData.y;
oObj.style.top = backData.x;
}
oObj.releaseCapture ? oObj.releaseCapture() : function(){};
}
}
function CloseFloatDiv(){
$('floatDiv').style.display = "none";
if($('backDiv')){
$('backDiv').style.display = "none";
}
}
</script>
这样，一个仿迅雷博客的登陆效果就做出来了。
以下是效果演示，在想要登陆的地方添加刚刚的代码，效果
点击用户登陆后就弹出浮动窗口：
登陆成功后：
为方便大家使用，我把以上代码整理了下，大家可以下载下来测试。http://www.pc123.org/uploads/soft/080925/1_1326004721.zip
