表单/表格

弹窗登陆注册表单jQuery插件

面包多

弹窗登陆注册表单jQuery插件-创客云
这是一款非常实用的 jQuery 和 css3 登陆注册表单插件。当用户打开了登陆或注册的模态窗口,他们很容易就可以在登陆和注册或忘记密码等操作窗口中来回切换,十分方便。

HTML 结构

登陆注册导航按钮的结构如下:

也想出现在这里?联系我们
创客主机
  1. <nav class="main-nav">
  2.   <ul>
  3.     <!-- all your main menu links here -->
  4.     <li><a class="cd-signin" href="#0">Sign in</a></li>
  5.     <li><a class="cd-signup" href="#0">Sign up</a></li>
  6.   </ul>
  7. </nav>

为了制作模态窗口,我们使用了一个嵌套的 div 结构,最外边的 div 是模态窗口。

  1. <div class="cd-user-modal"> <!-- this is the entire modal form, including the background -->
  2.   <div class="cd-user-modal-container"> <!-- this is the container wrapper -->
  3.     <ul class="cd-switcher">
  4.       <li><a href="#0">Sign in</a></li>
  5.       <li><a href="#0">New account</a></li>
  6.     </ul>
  7.   </div>
  8. </div>

提交表单的结构

  1. <div class="cd-user-modal">
  2.   <div class="cd-user-modal-container">
  3.     <!-- switcher tab here -->
  4.     <div id="cd-login"> 
  5.       <!-- form here -->    
  6.       <p class="cd-form-bottom-message"><a href="#0">Forgot your password?</a></p>
  7.     </div> 
  8.     <div id="cd-signup">
  9.       <!-- form here -->
  10.     </div>
  11.     <div id="cd-reset-password">
  12.       <!-- form here -->
  13.       <p class="cd-form-bottom-message"><a href="#0">Back to log-in</a></p>
  14.     </div>
  15.   </div> 
  16.   <a href="#0" class="cd-close-form">Close</a>
  17. </div>

CSS 样式

开始时模态窗口是隐藏的,我们设置其 visibility: hidden;和 opacity: 0;。这两个属性可以通过.is-visible 来同时修改。

  1. .cd-user-modal {
  2.   visibility: hidden;
  3.   opacity: 0;
  4.   transition: opacity 0.3s 0, visibility 0 0.3s;
  5. }
  6.  
  7. .cd-user-modal.is-visible {
  8.   visibility: visible;
  9.   opacity: 1;
  10.   transition: opacity 0.3s 0, visibility 0 0;
  11. }

我们为 visibility 的 transition 添加一个延时,使动画更加平滑。关闭按钮(.cd-close-form)在台式设备上设置了 display: none;。在台式设备上关闭模态窗口,点击非表单的任意地方或按 ESC 键要比点击一个按钮自然得多。在小屏幕上,因为空间有限,所以使用一个关闭按钮是很有帮助的。

JAVASCRIPT

在这个登陆注册表单中,密码是可以切换的,实现的原理是通过 jQuery 将表单改为 password 类型或 text 类型:

  1. $('.hide-password').on('click', function(){
  2.   var $this= $(this),
  3.     $password_field = $this.prev('input');
  4.  
  5.     ( 'password' == $password_field.attr('type') ) ? $password_field.attr('type', 'text') : $password_field.attr('type', 'password');
  6.     ( 'Hide' == $this.text() ) ? $this.text('Show') : $this.text('Hide');
  7.     //focus and move cursor to the end of input field
  8.     $password_field.putCursorAtEnd();
  9. });

putCursorAtEnd()函数将焦点移入当前字段,请参考 Move Cursor To End of Textarea or Input

(2)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!