推荐设备MORE

微信小程序为何而来—上海广

微信小程序为何而来—上海广

行业知识

能够互相转换的jQuery弹出来登陆与申请注册表格

日期:2021-02-13
我要分享
可以相互切换的jQuery弹出登录与注册表单  点一下浏览  点一下免费下载  我想个人收藏  点个赞(0)

文中融合案例,根据应用jQuery及其CSS3和HTML5技术性完成这一实际效果。

大家如今首页表面设定2个连接按键,即登陆和申请注册按键。

 nav  >

随后,创建多形式对话框弹出来层div.cd-user-modal,在弹出来层中置放2个用以转换的连接ul.cd-switcher,随后置放登陆和申请注册表格,各自相匹配div#cd-login和div#cd-signup。

 div  >

之上是全部html构造,在其中的form表格一部分在此省去,大伙儿能够依据要求随意写成你的表格构造,你还可以立即免费下载查询源代码。

默认设置的多形式对话框有着 visibility: hidden; and opacity: 0;的款式,也便是默认设置不能见。根据.is-visible来决策是不是弹出来显示信息。下列是关键的css编码,更详尽的css编码立即下载源码查询。

.cd-user-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(52, 54, 66, 0.9); z-index: 3; overflow-y: auto; cursor: pointer; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s 0, visibility 0 0.3s; -moz-transition: opacity 0.3s 0, visibility 0 0.3s; transition: opacity 0.3s 0, visibility 0 0.3s; } .cd-user-modal.is-visible { visibility: visible; opacity: 1; -webkit-transition: opacity 0.3s 0, visibility 0 0; -moz-transition: opacity 0.3s 0, visibility 0 0; transition: opacity 0.3s 0, visibility 0 0; } .cd-user-modal.is-visible .cd-user-modal-container { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .cd-user-modal-container { position: relative; width: 90%; max-width: 600px; background: #FFF; margin: 3em auto 4em; cursor: auto; border-radius: 0.25em; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; } .cd-user-modal-container .cd-switcher:after { content:  ; display: table; clear: both; } .cd-user-modal-container .cd-switcher li { width: 50%; float: left; text-align: center; } .cd-user-modal-container .cd-switcher li:first-child a { border-radius: .25em 0 0 0; } .cd-user-modal-container .cd-switcher li:last-child a { border-radius: 0 .25em 0 0; } .cd-user-modal-container .cd-switcher a { display: block; width: 100%; height: 50px; line-height: 50px; background: #d2d8d8; color: #809191; } .cd-user-modal-container .cd-switcher a.selected { background: #FFF; color: #505260; } #cd-login, #cd-signup { display: none; } #cd-login.is-selected, #cd-signup.is-selected{ display: block; } 
jQuery

弹出来层的弹出来和关掉实际效果由jquery操纵款式.is-visible的启用,转换表格是由jQuery操纵演试.is-selected的启用。

jQuery(document).ready(function($){ var $form_modal = $('.cd-user-modal'), $form_login = $form_modal.find('#cd-login'), $form_signup = $form_modal.find('#cd-signup'), $form_modal_tab = $('.cd-switcher'), $tab_login = $form_modal_tab.children('li').eq(0).children('a'), $tab_signup = $form_modal_tab.children('li').eq(1).children('a'), $main_nav = $('.main_nav'); //弹出来对话框 $main_nav.on('click', function(event){ if( $(event.target).is($main_nav) ) { // on mobile open the submenu $(this).children('ul').toggleClass('is-visible'); } else { // on mobile close submenu $main_nav.children('ul').removeClass('is-visible'); //show modal layer $form_modal.addClass('is-visible'); //show the selected form ( $(event.target).is('.cd-signup') ) ? signup_selected() : login_selected(); } }); //关掉弹出来对话框 $('.cd-user-modal').on('click', function(event){ if( $(event.target).is($form_modal) || $(event.target).is('.cd-close-form') ) { $form_modal.removeClass('is-visible'); } }); //应用Esc键关掉弹出来对话框 $(document).keyup(function(event){ if(event.which=='27'){ $form_modal.removeClass('is-visible'); } }); //转换表格 $form_modal_tab.on('click', function(event) { event.preventDefault(); ( $(event.target).is( $tab_login ) ) ? login_selected() : signup_selected(); }); function login_selected(){ $form_login.addClass('is-selected'); $form_signup.removeClass('is-selected'); $ot_password.removeClass('is-selected'); $tab_login.addClass('selected'); $tab_signup.removeClass('selected'); } function signup_selected(){ $form_login.removeClass('is-selected'); $form_signup.addClass('is-selected'); $ot_password.removeClass('is-selected'); $tab_login.removeClass('selected'); $tab_signup.addClass('selected'); } }); 

该案例手中机等移动终端上也是有非常好的展现实际效果,因为应用了css3实际效果,因此假如您应用IE访问器,请将版本号升級到IE9之上。明显提议大伙儿免费下载源码,略微改下立即便可以应用到你的新项目中。

转截请标明:编码佳园 » 能够互相转换的jQuery弹出来登陆与申请注册表格