jQuery在弹出窗口中实现登录和注册表单的切换

当您单击页面上的登录或注册按钮时，将弹出一个模态窗口，即弹出层。我们可以在弹出层轻松切换登录和注册表单，非常方便用户。不需要关闭图层然后点击切换到其他操作。它已经在许多网站上广泛使用。

本文采用jQuery、CSS3和HTML5技术来实现这一效果。

超文本标记语言

我们现在在主页上设置两个链接按钮，即登录和注册按钮。

nav class=' main _ nav ' ullia class=' CD-signing ' href=' 0 '登录/a/lilia class=' CD-signing ' href=' 0 '注册/a/li /ul /nav。然后，建立弹出层div . CD-用户-模态窗口的模态。在弹出层放置两个用于切换的链接ul.cd-switcher，然后放置登录和登记表，分别对应div#cd-login和div # CD-registration。

div class=' CD-user-modal ' div class=' CD-user-modal-container ' ul class=' CD-switcher ' lia href=' # 0 '用户登录/a/li lia href='#0 '注册新用户/a/Li/ul div id=' CD-log in-log in-form-/form/div id=' CD-registration ' form class=' CD-form '！-登记表-/form/div/div/div以上是整个html结构，这里省略了表单部分。可以根据自己的需求自由编写表单结构，也可以直接下载查看源代码。

半铸钢钢性铸铁(Cast Semi-Steel)

默认模式窗口隐藏了visibility:和opa city 3360 0；默认情况下，的样式不可见。使用。is-可见以决定是否弹出显示。以下是主要的css代码。更多详细的css代码请下载源代码。光盘用户模型{位置：固定；top : 0；左： 0；宽度： 100%;高度： 100%;背景： rgba(52，54，66，0.9)；z-index : 3；溢出-y:自动；光标：指针；可见性：隐藏；opa城市3360 0；-网络套件-transit :不透明度0.3s 0，能见度0 0.3s-moz-transit :不透明度0.3s 0，能见度0 0.3跃迁：不透明度0.3s 0，能见度0 0.3s}。光盘用户模式。is-能见度：能见度；opa城市3360 1；-网络套件-transit :不透明度0.3s 0，能见度0 0;-moz-transit :不透明度0.3s 0，能见度0 0;过渡：不透明度0.3s 0，能见度0 0;} .光盘用户模式。是-可见. CD-用户-模态-容器{-web kit-transform : translateY(0)；-moz-transform : translateY(0)；-ms-transform : translateY(0)；-o-transform : translateY(0)；transform : translateY(0)；} .光盘用户-模式-容器{相对位置：宽度： 90%;最大宽度： 600像素；背景： # FFF；margin : 3em auto 4em cursor : auto边界半径： 0.25 em-web套件-transform : translateY(-30px)；-moz-transform : translateY(-30px)；-ms-transform : translateY(-30px)；-o型变压器： translateY(-30px)；transform : translateY(-30px)；-web套件-过渡-属性：-web套件-转换；-moz-transition-property :-moz-transform；过渡属性：转换；-网络套件-过渡-持续时间：0.3s；-moz-过渡-持续时间：0.3s；过渡-持续时间：0.3s；} .激光唱片用户模式容器{内容： }之后的：开关；显示器：表；clear:两者；} .激光唱片用户模式容器cd .切换器li {宽度： 50%;向左浮动：文本对齐：中心；} .激光唱片用户模式容器cd .切换器radius:第一子{边框半径：25 em 000；} .激光唱片用户模式容器cd .切换器李：最后一个孩子a {边框半径： 0。25 em 00；} .激光唱片用户模式容器cd .切换器{ display:块；宽度： 100%;高度： 50px线高： 50px背景技术# d2d8d8color: # 809191}。激光唱片用户模式容器cd .切换器a .精选{背景： # FFF；color: # 505260} #光盘-登录，#光盘-注册{ display : none } # CD-log in . is-selected，# CD-registration。is-selected {显示：块；} jQuery

弹出层的弹出和关闭效果由jquery控制样式。是可见的的调用，切换表单是由jQuery控制演示。被选中的调用。

jQuery(文档)。ready(function($){ var $ form _ modal=$(').cd-user-modal ')，$ form _ log in=$ form _ modal。find(# CD-log in ')，$ form _ registration=$ form _ modal。find(# CD-registration ')，$form_modal_tab=$(').cd-switcher ')，$ tab _ log in=$ form _ modal _ tab。孩子们(李).等式(0).children('a ')，$ tab _ registration=$ form _ modal _ tab。孩子们(李).等式(1)。子代(' a ')，$main_nav=$(' .main _ nav’)；//弹出窗口$main_nav.on('click '，函数(事件){ if($(事件。目标).is($main_nav) ) { //在手机上打开子菜单$(这个).儿童(' ul ').切换类(' is-visible ')；} else { //在移动关闭子菜单$main_nav.children('ul ')上remove CLaSS(' is-visible ')；//显示模态层$ form _ modal。add class(' is-visible ')；//显示选定的表单($(event.target).是('。激光唱片注册')?注册_选定():登录_选定();} });//关闭弹出窗口$('.光盘用户-模式')。on('click '，function(event){ if($(event。目标).is($ form _ modal)| | $(事件。目标).是('。CD-close-form '){ $ form _ modal。移除类(“-is-visible”)；} });//使用转义字符键关闭弹出窗口$(文档)。keyup(函数(事件){ if(事件。what==' 27 '){ $ form _ modal。移除类(“-is-visible”)；} });//切换表单$form_modal_tab.on('click '，function(event){ event。prevent default()；($(event.target).是($tab_login))？log in _ selected(): registration _ selected()；});函数log in _ selected(){ $ form _ log in。add class(' is-selected ')；$ form _ signing。移除类(' is-selected ')；$ form _忘带_密码。移除类(' is-selected ')；$tab_login.addClass('选定');$ tab _ registration . remove class('选定');}函数registration _ selected(){ $ form _ log in。移除类(' is-selected ')；$ form _ signing。addCLaSS(' is-selected ')；$ form _忘带_密码。移除类(' is-selected ')；$tab_login.removeClass('选定');$ tab _ registration . addCLaSS('选定');} });该实例在手机等移动设备上也有很好的展示效果，由于运用了css3效果，所以如果您使用工业管理学(工业工程)浏览器，请将版本升级到IE9以上。强烈建议大家下载源代码，稍微改下直接就可以运用到你的项目中。

以上所述就是本文的全部内容了，希望大家能够喜欢。