网站弹出登陆窗口设计

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

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

其中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. 没有图片

    2009.09.09

    关于Google Checkout

    今天打开一个英文站 Mylife ,在浏览这…

  2. 没有图片

    2014.09.03

    如何正确地给固态硬盘分区(转)

    如果您正在使用或者准备购买固态硬盘(SSD)…

  3. 没有图片

    2012.02.28

    Windows 2003 Server 权限设置教程

    整理了一下Windows 2003 Serv…

  4. 没有图片

    2011.04.04

    给你的页面添加返回顶部按钮

    大家应该都经历过,优秀的网页都会给人一个良好…

  5. 没有图片

    2011.04.25

    52个干净的基于CSS标签的导航代码

    无论我们是在制作网站还是博客,我们都会使用导…

  6. 没有图片

    2013.11.19

    WordPress个性轻博客主题 XiaoXiao 发布

    很早就发布过轻博客主题 Cimple,深受大…

评论

  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下午

    牛,和腾讯那个很像!

About

马拉松运动员,沉迷于跑步;关注科技前沿,关注互联网!与跑者、程序员、设计师为伍,一起跑步健身,一起编写程序,为自由而战!