這篇文章主要講解了“jQuery怎么實(shí)現(xiàn)彈出窗口切換登錄與注冊(cè)表單功能”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“jQuery怎么實(shí)現(xiàn)彈出窗口切換登錄與注冊(cè)表單功能”吧！

成都創(chuàng)新互聯(lián)始終堅(jiān)持【策劃先行，效果至上】的經(jīng)營(yíng)理念，通過(guò)多達(dá)10多年累計(jì)超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的營(yíng)銷解決方案，現(xiàn)已廣泛運(yùn)用于各行各業(yè)的客戶，其中包括：成都輕質(zhì)隔墻板等企業(yè)，備受客戶稱揚(yáng)。

當(dāng)點(diǎn)擊頁(yè)面中的登錄或注冊(cè)按鈕時(shí)，將會(huì)彈出一個(gè)模態(tài)窗口，就是一個(gè)彈出層，我們可以在彈出層上輕松的切換登錄與注冊(cè)表單，極大的方便用戶，不需要關(guān)閉層再去點(diǎn)擊轉(zhuǎn)向其他操作，在很多網(wǎng)站上已經(jīng)廣泛應(yīng)用。

本文結(jié)合實(shí)例，通過(guò)使用jQuery以及CSS3和HTML5技術(shù)實(shí)現(xiàn)這一效果。

HTML

我們現(xiàn)在主頁(yè)面上設(shè)置兩個(gè)鏈接按鈕，即登錄和注冊(cè)按鈕。

<nav class="main_nav"> <ul> <li><a class="cd-signin" href="#0">登錄</a></li> <li><a class="cd-signup" href="#0">注冊(cè)</a></li> </ul> </nav>

然后，建立模態(tài)窗口彈出層p.cd-user-modal，在彈出層中放置兩個(gè)用于切換的鏈接ul.cd-switcher，然后放置登錄和注冊(cè)表單，分別對(duì)應(yīng)p#cd-login和p#cd-signup。

<p class="cd-user-modal"> <p class="cd-user-modal-container"> <ul class="cd-switcher"> <li><a href="#0">用戶登錄</a></li> <li><a href="#0">注冊(cè)新用戶</a></li> </ul> <p id="cd-login"> <form class="cd-form"> <!-- 登錄表單 --> </form> </p> <p id="cd-signup"> <form class="cd-form"> <!-- 注冊(cè)表單 --> </form> </p> </p> </p>

以上是整個(gè)html結(jié)構(gòu)，其中的form表單部分在此省略，大家可以根據(jù)需求自由寫(xiě)出你的表單結(jié)構(gòu)，你也可以直接下載查看源碼。

CSS

默認(rèn)的模態(tài)窗口擁有 visibility: hidden; and opacity: 0;的樣式，也就是默認(rèn)不可見(jiàn)。通過(guò).is-visible來(lái)決定是否彈出顯示。以下是主要的css代碼，更詳細(xì)的css代碼請(qǐng)下載源代碼查看。

.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

彈出層的彈出和關(guān)閉效果由jquery控制樣式.is-visible的調(diào)用，切換表單是由jQuery控制演示.is-selected的調(diào)用。

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(); } }); //關(guān)閉彈出窗口 $('.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鍵關(guān)閉彈出窗口 $(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'); $form_forgot_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'); $form_forgot_password.removeClass('is-selected'); $tab_login.removeClass('selected'); $tab_signup.addClass('selected'); } });

該實(shí)例在手機(jī)等移動(dòng)設(shè)備上也有很好的展示效果，由于運(yùn)用了css3效果，所以如果您使用IE瀏覽器，請(qǐng)將版本升級(jí)到IE9以上。強(qiáng)烈建議大家下載源代碼，稍微改下直接就可以運(yùn)用到你的項(xiàng)目中。

感謝各位的閱讀，以上就是“jQuery怎么實(shí)現(xiàn)彈出窗口切換登錄與注冊(cè)表單功能”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)jQuery怎么實(shí)現(xiàn)彈出窗口切換登錄與注冊(cè)表單功能這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

文章標(biāo)題：jQuery怎么實(shí)現(xiàn)彈出窗口切換登錄與注冊(cè)表單功能-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://chinadenli.net/article30/dgegso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、搜索引擎優(yōu)化、品牌網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、網(wǎng)站排名、小程序開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)