페이지에서 로그인 또는 등록 버튼을 클릭하면 팝업 레이어인 모달 창이 팝업 레이어에서 쉽게 전환할 수 있어 매우 편리합니다. 사용자를 위한 것이며 많은 웹사이트에서 널리 사용되는 다른 작업으로 전환하려면 레이어를 클릭할 필요가 없습니다.
이 기사에서는 jQuery와 CSS3 및 HTML5 기술을 사용하여 이러한 효과를 얻는 예제를 결합합니다.
HTML
이제 메인 페이지에는 로그인 버튼과 등록 버튼이라는 두 개의 링크 버튼이 있습니다.
<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- 로그인 및 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">注册新用户</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 구조이며, 여기서는 폼 부분을 생략하였습니다. 필요에 따라 폼 구조를 자유롭게 작성하실 수도 있고, 소스코드를 직접 다운로드하여 보실 수도 있습니다.
CSS
기본 모달 창에는 가시성: 숨김; 및 불투명도: 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
팝업 레이어의 팝업 및 닫기 효과는 style.is-visible 호출을 사용하여 jQuery로 제어하고, 전환 양식은 데모.is-selected 호출을 사용하여 jQuery로 제어합니다.
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 이상으로 업그레이드하시기 바랍니다. 소스 코드를 다운로드하고 약간 변경하여 프로젝트에 직접 적용하는 것이 좋습니다.
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.