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

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

HTML

我們現(xiàn)在主頁面上設(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)窗口彈出層div.cd-user-modal，在彈出層中放置兩個(gè)用于切換的鏈接ul.cd-switcher，然后放置登錄和注冊(cè)表單，分別對(duì)應(yīng)div#cd-login和div#cd-signup。

 
<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">注冊(cè)新用戶</a></li> 
    </ul> 
 
    <div id="cd-login"> 
      <form class="cd-form"> 
        <!-- 登錄表單 --> 
      </form> 
    </div> 
 
    <div id="cd-signup"> 
      <form class="cd-form"> 
        <!-- 注冊(cè)表單 --> 
      </form> 
    </div>     
  </div> 
</div>

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

CSS

默認(rèn)的模態(tài)窗口擁有 visibility: hidden; and opacity: 0;的樣式，也就是默認(rèn)不可見。通過.is-visible來決定是否彈出顯示。以下是主要的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)目中。

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: