首页 > 代码 > 网站弹出登陆窗口设计

网站弹出登陆窗口设计

2010年2月5日 菠萝  点击: 237 发表评论 阅读评论

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

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

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

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

点击下载完整代码!

本文热度: 9%

本文由 [菠萝] 原创,转载请注明转自:菠萝筐[http://www.blook.org.cn];
如果你觉得本博内容不错,欢迎 [订阅菠萝筐],以便第一时间了解本博更新内容;
本文链接:http://www.blook.org.cn/pop-up-login-window/
分类: 代码 标签:
  1. 2010年2月19日15:31 | #1

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

  2. 2010年2月18日22:56 | #2

    @我心疯狂
    新年快乐!

    @羽中
    虎年快乐!

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

  3. 2010年2月14日16:18 | #3

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

  4. 2010年2月14日09:44 | #4

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

  5. 2010年2月14日00:28 | #5

    祝你新年快乐,虎年吉祥

  6. 2010年2月13日23:39 | #6

    新年快乐!

    春节快乐!

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

  7. 2010年2月13日22:12 | #7

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

  8. 2010年2月13日00:06 | #8

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

  9. 2010年2月8日17:19 | #9

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

  10. 2010年2月8日14:16 | #10

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

  11. 2010年2月6日21:21 | #11

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

  12. 2010年2月6日00:01 | #12

    纯围观
    表拍砖

  13. 2010年2月5日23:31 | #13

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

  14. 2010年2月5日13:20 | #14

    呵呵,可以用来钓鱼了!

  15. 2010年2月5日13:05 | #15

    牛,和腾讯那个很像!

  1. 本文目前尚无任何 trackbacks 和 pingbacks.
= 2 + 7 (练习一下算术)
Please leave these two fields as-is: