DIV CSS 佈局教程網

 　　本文給大家推薦的是一款jQuery實現彈出窗口中切換登錄與注冊表單的特效。適用浏覽器：IE8+、FireFox、Chrome、Safari、Opera。十分的方便實用，有需要的小伙伴可以參考下。

　　當點擊頁面中的登錄或注冊按鈕時，將會彈出一個模態窗口，就是一個彈出層，我們可以在彈出層上輕松的切換登錄與注冊表單，極大的方便用戶，不需要關閉層再去點擊轉向其他操作，在很多網站上已經廣泛應用。

　　本文結合實例，通過使用jQuery以及CSS3和HTML5技術實現這一效果。

　　HTML

　　我們現在主頁面上設置兩個鏈接按鈕，即登錄和注冊按鈕。

　　?

1 2 3 4 5 6 <nav class="main_nav"> <ul> <li><a class="cd-signin" href="#0">登錄</a></li> <li><a class="cd-signup" href="#0">注冊</a></li> </ul> </nav>

　　然後，建立模態窗口彈出層div.cd-user-modal，在彈出層中放置兩個用於切換的鏈接ul.cd-switcher，然後放置登錄和注冊表單，分別對應div#cd-login和div#cd-signup。

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21   <div class="cd-user-modal"> <div class="cd-user-modal-container"> <ul class="cd-switcher"> <li><a href="#0">用戶登錄</a></li> <li><a href="#0">注冊新用戶</a></li> </ul>   <div id="cd-login"> <form class="cd-form"> <!-- 登錄表單 --> </form> </div>   <div id="cd-signup"> <form class="cd-form"> <!-- 注冊表單 --> </form> </div> </div> </div>

　　以上是整個html結構，其中的form表單部分在此省略，大家可以根據需求自由寫出你的表單結構，你也可以直接下載查看源碼。

　　CSS

　　默認的模態窗口擁有 visibility: hidden; and opacity: 0;的樣式，也就是默認不可見。通過.is-visible來決定是否彈出顯示。以下是主要的css代碼，更詳細的css代碼請下載源代碼查看。

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88   .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的調用。

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 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'); $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'); }   });

　　該實例在手機等移動設備上也有很好的展示效果，由於運用了css3效果，所以如果您使用IE浏覽器，請將版本升級到IE9以上。強烈建議大家下載源代碼，稍微改下直接就可以運用到你的項目中。

　　以上所述就是本文的全部內容了，希望大家能夠喜歡。