免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
最近访问板块 发新帖
查看: 7847 | 回复: 3

分享一个自己写的登录表单弹窗DEMO [复制链接]

论坛徽章:
6
CU大牛徽章
日期:2013-05-20 10:43:41IT运维版块每日发帖之星
日期:2016-07-29 06:20:00IT运维版块每日发帖之星
日期:2016-01-27 06:20:00CU大牛徽章
日期:2013-05-20 10:44:16CU大牛徽章
日期:2013-05-20 10:44:0615-16赛季CBA联赛之广东
日期:2018-03-09 11:17:08
发表于 2013-09-26 15:41 |显示全部楼层
QQ截图20130926152946.png
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>登录表单DEMO</title>
  6. <style type="text/css">
  7.         body{margin:0;padding:0}
  8.         #login_form{width:400px;border:3px solid gray;display:none;position:absolute;z-index:9999;background:white}
  9.         .entry{height:30px;padding:10px}
  10.         .entry label{width:100px;display:inline-block;height:20px;padding:5px;vertical-align:middle}
  11.         .input_field{vertical-align:middle;width:200px;height:20px;border:1px solid gray;outline:none;font-size:20px;line-height:20px;padding:5px}
  12.         .login_title{height:20px; padding:10px}
  13.         .login_title span{color:gray;float:left;height:20px;display:block;font-size:20px}
  14.         .login_title a{display:block; height:20px; width:20px;line-height:20px;float:right;text-decoration:none;outline:none;color:white;background:gray;text-align:center}
  15.         .login_title a:hover{background:#FF8040}
  16.         .input_hint{color:gray;font-style:italic;font-weight:normal; font-size:14px}
  17.         .input_btn{width:100px; height:30px;text-decoration:none;outline:none;background:gray;display:inline-block;line-height:30px;text-align:center;color:white;font-weight:bold;font-size:20px}
  18.         .input_btn:hover{background:#FF8040}
  19. </style>

  20. </head>
  21. <body>
  22.         <br>
  23.         <a href="javascript:void(0);" id="login">登录</a>
  24.         <div id="login_form">
  25.             <div class="login_title">
  26.           <span>用户登录</span>
  27.           <a href="#" id="close_btn" title="关闭">X</a>
  28.         </div>
  29.         <div style="clear:both"></div>
  30.             <form action="#" method="post">
  31.             <div class="entry">
  32.                 <label for="username">用户名:</label>
  33.             <input class="input_field input_hint" type="text" id="username" name="username" value="用户名/电子邮箱" />
  34.         </div>
  35.        <div class="entry">
  36.                 <label for="passwd">密 码:</label>
  37.             <input class="input_field" type="password" id="passwd" name="passwd" value="" />
  38.         </div>
  39.          <div class="entry">
  40.             <a class="input_btn" href="#" id="login_btn" name="login_btn"> 登 录 </a>
  41.         </div>
  42.        </form>
  43.     </div>
  44. </body>
  45. <script type="text/javascript">
  46.         var a_login =  document.getElementById('login');
  47.         var username = document.getElementById('username');
  48.         var close_btn = document.getElementById('close_btn');
  49.        
  50.         //关闭按钮
  51.         close_btn.href = 'javascript:void(0);';
  52.         close_btn.onclick = function() {
  53.                 document.getElementById('login_form').style.display = 'none';
  54.         }
  55.        
  56.         //用户名框的onfocus和onblur特效
  57.         username.onfocus = function() {
  58.                 if(this.value == '用户名/电子邮箱') {
  59.                         this.value = '';
  60.                         this.className = 'input_field';       
  61.                 }
  62.         }
  63.         username.onblur = function() {
  64.                 if(this.value == '') { //没做trim
  65.                         this.className = this.className + ' input_hint';       
  66.                         this.value = '用户名/电子邮箱';
  67.                 }       
  68.         }
  69.         //点击登录按钮,显示登录框
  70.         a_login.onclick = function() {
  71.                 var login_form = document.getElementById('login_form');
  72.                 //BODY宽度
  73.                 var docWidth = document.documentElement.clientWidth;
  74.                 //BODY高度
  75.                 var docHeight = document.documentElement.clientHeight;       
  76.                 //计算中心位置(这里直接使用了固定宽高,还有一个小问题就是当浏览器放大和缩小时不会自动居中)
  77.                 login_form.style.top  = Math.floor(((docHeight - 300)/2)) + 'px';
  78.                 login_form.style.left = Math.floor(((docWidth - 400)/2)) + 'px';
  79.                 login_form.style.display = 'block';
  80.         }
  81. </script>
  82. </html>
复制代码

论坛徽章:
0
发表于 2013-10-08 22:22 |显示全部楼层
这个不错 支持

论坛徽章:
0
发表于 2013-10-09 11:33 |显示全部楼层
挺好的     

论坛徽章:
0
发表于 2013-11-23 19:53 |显示全部楼层
顶                          
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

SACC2021中国系统架构师大会

【数字转型 架构重塑】2021年5月20日-22日第十三届中国系统架构师大会将在云端进行网络直播。

大会为期3天的议程,涉及20+专场,近120个主题,完整迁移到线上进行网络直播对会议组织来说绝非易事;但考虑到云端会议的直播形式可以实现全国各地技术爱好者的参与,也使ITPUB作为技术共享交流平台得到更好的普及,我们决定迎难而上。
http://sacc.it168.com/


大会官网>>
  

北京盛拓优讯信息技术有限公司. 版权所有 16024965号-6 北京市公安局海淀分局网监中心备案编号:11010802020122
中国互联网协会会员  联系我们:huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP