您好,登錄后才能下訂單哦!
這篇文章主要講解了“jQuery怎么實現(xiàn)彈出窗口切換登錄與注冊表單功能”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“jQuery怎么實現(xiàn)彈出窗口切換登錄與注冊表單功能”吧!
當(dāng)點擊頁面中的登錄或注冊按鈕時,將會彈出一個模態(tài)窗口,就是一個彈出層,我們可以在彈出層上輕松的切換登錄與注冊表單,極大的方便用戶,不需要關(guān)閉層再去點擊轉(zhuǎn)向其他操作,在很多網(wǎng)站上已經(jīng)廣泛應(yīng)用。
本文結(jié)合實例,通過使用jQuery以及CSS3和HTML5技術(shù)實現(xiàn)這一效果。
我們現(xiàn)在主頁面上設(shè)置兩個鏈接按鈕,即登錄和注冊按鈕。
<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>
然后,建立模態(tài)窗口彈出層p.cd-user-modal,在彈出層中放置兩個用于切換的鏈接ul.cd-switcher,然后放置登錄和注冊表單,分別對應(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">注冊新用戶</a></li>
</ul>
<p id="cd-login">
<form class="cd-form">
<!-- 登錄表單 -->
</form>
</p>
<p id="cd-signup">
<form class="cd-form">
<!-- 注冊表單 -->
</form>
</p>
</p>
</p>
以上是整個html結(jié)構(gòu),其中的form表單部分在此省略,大家可以根據(jù)需求自由寫出你的表單結(jié)構(gòu),你也可以直接下載查看源碼。
默認(rèn)的模態(tài)窗口擁有 visibility: hidden; and opacity: 0;的樣式,也就是默認(rèn)不可見。通過.is-visible來決定是否彈出顯示。以下是主要的css代碼,更詳細(xì)的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;
}
彈出層的彈出和關(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è)備上也有很好的展示效果,由于運用了css3效果,所以如果您使用IE瀏覽器,請將版本升級到IE9以上。強烈建議大家下載源代碼,稍微改下直接就可以運用到你的項目中。
感謝各位的閱讀,以上就是“jQuery怎么實現(xiàn)彈出窗口切換登錄與注冊表單功能”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對jQuery怎么實現(xiàn)彈出窗口切換登錄與注冊表單功能這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。