网站弹出登陆窗口设计

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

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

其中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.10.17

    推荐三款我正在使用的WordPress优化插件

    本文应该算是写给新博主,如果你是才建博客,应…

  2. 没有图片

    2011.11.20

    同步WordPress到新浪微博插件wp-tsina

    博客搬家后,很久不玩同步了,本来哥是个同步控…

  3. 没有图片

    2009.10.22

    WordPress博客搬家之更换域名教程

    博客搬家一般有两种形式,一种就是换空间,一种…

  4. 没有图片

    2010.09.27

    OneNote 2010 的功能和优点

    Microsoft OneNote 2010…

  5. 没有图片

    2010.03.22

    MSDN Windows 7 专业版 | Windows 7 Professional

    今天我的Windows 7 旗舰版资源管理器…

  6. 没有图片

    2012.12.14

    免费WordPress杂志主题: BooThemes

    前几天已经与大家分享了一款免费的WordPr…

评论

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

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

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

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

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

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