大家都知道，很多博客或网站都有一个点击弹出登陆窗口的功能，非常漂亮。本文就介绍一下制作方法。

首先在你需要显示用户登陆的地方添加以下代码：

<div id="loginform"><a onclick="javascript:Login(true);" href="#">用户登陆</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"><!--mce:0--></script>

之后在想要登陆的地方放上以上代码即可。

点击下载完整代码！

┄ ┄ ┄ ┄ ┄ ┄ ┄ ┄ ┄ ┄ 本文已被 『17』 人围攻! ┄ ┄ ┄ ┄ ┄ ┄ ┄ ┄ ┄ ┄

  1. 淘宝精品返现网 says:
    2010/05/09 at 2:39 am

    怎么改进一下才能实现，打开某链接时要求验证登陆。我试了一下这个把#号换成链接就不行了，要怎么做呢？谢谢

    reply
  2. 淘宝精品返现网 says:
    2010/05/09 at 2:37 am

    怎么只能是用#号啊，换别的链接就不行了。怎么才能做到在打开某链接时要求验证登陆呢？

    reply
  3. 3G12114 says:
    2010/02/19 at 3:31 pm

    好的，就要顶起，不能沉了！

    reply
  4. 菠萝 says:
    2010/02/18 at 10:56 pm

    @我心疯狂
    新年快乐！

    @羽中
    虎年快乐！

    @秦大少
    新年快乐！谢谢美元！
    菠萝的最新日志：网站弹出登陆窗口设计

    reply
  5. 秦大少 says:
    2010/02/14 at 4:18 pm

    情人节来拜年，送美元了！
    祝新年大发！

    reply
  6. 羽中 says:
    2010/02/14 at 9:44 am

    春节快乐，祝你在新年里虎头虎脑虎背熊腰明知山有虎偏向虎山行！
    羽中的最新日志：独家新春贺岁DV—终结者！

    reply
  7. 我心疯狂 says:
    2010/02/14 at 12:28 am

    祝你新年快乐，虎年吉祥

    reply
  8. 淘宝网购物 says:
    2010/02/13 at 11:39 pm

    新年快乐！

    春节快乐！

    朋友！
    淘宝网购物的最新日志：喜洋洋 喜羊羊与灰太狼全集 40册 彩色版 [送复制DVD一张]

    reply
  9. Jimmy says:
    2010/02/13 at 10:12 pm

    很新颖啊，赞一个！
    祝新春愉快啊

    reply
  10. Snow says:
    2010/02/13 at 12:06 am

    第一次来哈。算是拜个年。~~嘿嘿。

    reply
  11. 羽中 says:
    2010/02/08 at 5:19 pm

    不错，就是博客大都不需要登录倒是
    羽中的最新日志：趣奇是张小卡片

    reply
  12. 从前网 says:
    2010/02/08 at 2:16 pm

    感觉不错，留言顶起
    从前网的最新日志：凤姐征婚 只不过是营销炒作

    reply
  13. danielbody says:
    2010/02/06 at 9:21 pm

    来支持下博主，加油更新，多多互动O(∩_∩)O~

    reply
  14. Jclyn says:
    2010/02/06 at 12:01 am

    纯围观
    表拍砖

    reply
  15. Firm says:
    2010/02/05 at 11:31 pm

    适用WP的主题吗？
    Firm的最新日志：猪八戒威客网发布任务技巧，细节决定成败

    reply
  16. Kada says:
    2010/02/05 at 1:20 pm

    呵呵，可以用来钓鱼了！

    reply
  17. 阿吴 says:
    2010/02/05 at 1:05 pm

    牛，和腾讯那个很像！

    reply

Leave a Reply

= 4 + 2 (练习一下算术)
Please leave these two fields as-is:
Note: 您可以使用 '@User:'自动给对应的用户发邮件通知。