网站弹出登陆窗口设计

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

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

其中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生成的方法。代码如下:

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

点击下载完整代码!

落花生

认准了方向,就要勇敢地走下去,十年磨一剑,我相信,只要坚持,一切都有可能。

相关日志

  1. 2013.10.30

    博客升级到 WordPress 3.7.1

    才升级到WordPress 3.7正式版没几…

  2. 没有图片

    2009.07.26

    SEO到底给我们带来什么?

    近来一个博友通过QQ与我在SEO对网站到底有…

  3. 没有图片

    2010.09.27

    微软安全软件 Microsoft Security Essentials

    通过正版验证的Windows电脑用户,可以免…

  4. 没有图片

    2010.01.23

    不用插件实现WordPress自定义日志缩略图的方法

    网有已经有很多文章介绍了WordPress缩…

  5. 没有图片

    2009.09.27

    WordPress反垃圾评论插件 wp imgcode

    当我的Wordpress博客开始受大家关注的…

  6. 没有图片

    2012.06.15

    简短而实用的WordPress随机日志调用代码

    此段调用代码可以用来制作碰碰运气,也可以用来…

评论

  1. 生死网赚 2010.11.19 8:08下午

    讲的不错。。对新手用处很大

  2. 淘宝精品返现网 2010.05.09 2:39上午

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

  3. 淘宝精品返现网 2010.05.09 2:37上午

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

  4. 3G12114 2010.02.19 3:31下午

    好的,就要顶起,不能沉了!

  5. 菠萝 2010.02.18 10:56下午

    @我心疯狂
    新年快乐!

    @羽中
    虎年快乐!

    @秦大少
    新年快乐!谢谢美元!
    .-= 菠萝的最新日志:网站弹出登陆窗口设计 =-.

  6. 秦大少 2010.02.14 4:18下午

    情人节来拜年,送美元了!
    祝新年大发!

  7. 羽中 2010.02.14 9:44上午

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

  8. 我心疯狂 2010.02.14 12:28上午

    祝你新年快乐,虎年吉祥

  9. 淘宝网购物 2010.02.13 11:39下午

    新年快乐!

    春节快乐!

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

  10. Jimmy 2010.02.13 10:12下午

    很新颖啊,赞一个!
    祝新春愉快啊

  11. Snow 2010.02.13 12:06上午

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

  12. 羽中 2010.02.08 5:19下午

    不错,就是博客大都不需要登录倒是
    .-= 羽中的最新日志:趣奇是张小卡片 =-.

  13. 从前网 2010.02.08 2:16下午

    感觉不错,留言顶起
    .-= 从前网的最新日志:凤姐征婚 只不过是营销炒作 =-.

  14. danielbody 2010.02.06 9:21下午

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

  15. Jclyn 2010.02.06 12:01上午

    纯围观
    表拍砖

  16. Firm 2010.02.05 11:31下午

    适用WP的主题吗?
    .-= Firm的最新日志:猪八戒威客网发布任务技巧,细节决定成败 =-.

  17. Kada 2010.02.05 1:20下午

    呵呵,可以用来钓鱼了!

  18. 阿吴 2010.02.05 1:05下午

    牛,和腾讯那个很像!