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

首先在你需要显示用户登陆的地方添加以下代码:
<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/
分类: 代码
好的,就要顶起,不能沉了!
@我心疯狂
新年快乐!
@羽中
虎年快乐!
@秦大少
新年快乐!谢谢美元!
菠萝的最新日志:网站弹出登陆窗口设计
情人节来拜年,送美元了!
祝新年大发!
春节快乐,祝你在新年里虎头虎脑虎背熊腰明知山有虎偏向虎山行!
羽中的最新日志:独家新春贺岁DV—终结者!
祝你新年快乐,虎年吉祥
新年快乐!
春节快乐!
朋友!
淘宝网购物的最新日志:喜洋洋 喜羊羊与灰太狼全集 40册 彩色版 [送复制DVD一张]
很新颖啊,赞一个!
祝新春愉快啊
第一次来哈。算是拜个年。~~嘿嘿。
不错,就是博客大都不需要登录倒是
羽中的最新日志:趣奇是张小卡片
感觉不错,留言顶起
从前网的最新日志:凤姐征婚 只不过是营销炒作
来支持下博主,加油更新,多多互动O(∩_∩)O~
纯围观
表拍砖
适用WP的主题吗?
Firm的最新日志:猪八戒威客网发布任务技巧,细节决定成败
呵呵,可以用来钓鱼了!
牛,和腾讯那个很像!