表单/表格

弹窗登陆注册表单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

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
也想出现在这里?联系我们
360uxc
免费下载
(2)

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

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Ashade - 作品展示摄影相册WordPress汉化主题

Envato Affiliates

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

嘿,欢迎咨询!