| chugatrongchoai | Date: Thứ 2, 2013/08/05, 10:23 AM | Message # 1 |
 Tân Binh đạt Huy chương
Nhóm: Sáng lập viên
Bài viết: 220
| Bài viết này tôi sẽ hướng dẫn các bạn sử dụng effect method fadeIn và fadeOut của jQuery để ẩn hiện login form.
Demo
Download
Đầu tiên ta tạo login form bằng html và css. Bài viết này tôi sử dụng free file psd của login form ở đây.
Mã HTML
Code <body> <div class="login-bar"> <a href="#" class="login-button">Login Here</a> </div><!--login show button--> <div class="overlay"></div><!--overlay--> <form class="login"> <div class="login-header"> <span>Please Log In</span> <a href="#" class="close">x</a> </div> <div class="login-content"> <label for="name">Name:</label> <input type="text" value="Username" id="name" class="name"/> <label for="pass">Pass:</label> <input type="password" value="password" id="pass" class="pass"/> <input type="submit" value="Log In" class="loginsubmit"/> </div> </form><!--login box--> </body>
Mã CSSĐầu tiên ta tạo login box.
Để làm giống như hình trên thì mã css hơi dài một tý
Code /*---login box--*/
body{
font-family:helvetica,arial,sans-serif;
font-size:12px;
background-color:#f2f2f2;
}
.login{
position:absolute;
left:50%;
top:25%;
margin-left:-140px;
width:280px;
border-radius:7px;
overflow:hidden;
background-color:#111111;
border:1px solid #000000;
box-shadow:0 0 10px rgba(0,0,0,0.8);
z-index:999;
}
.login-header{
border-radius:7px 7px 0 0;
text-align:center;
position:relative;
height:38px;
line-height:36px;
color:#eaeaea;
text-shadow:0 1px 0 rgba(0,0,0,0.8);
font-weight:bold;
background-color:#212121;
background-image:linear-gradient(top,#232323 0%,#1d1d1d 50%,#010101 50%,#0f0f0f 100%);
border-bottom:1px solid #111111;
box-shadow:0 1px 0 rgba(255,255,255,0.2) inset,0 -1px 0 rgba(0,0,0,1) inset;
}
.login-content{
border-top:1px solid #262626;
padding:16px;
box-shadow:0 0 10px rgba(0,0,0,0.5) inset,0 -1px 0 rgba(255,255,255,0.1) inset;
}
.login label{
display:block;
margin-bottom:9px;
font-size:10px;
text-shadow:0 0 1px rgba(0,0,0,0.5);
font-weight:900;
color:#4b4b4b;
}
.login input:not(.loginsubmit){
margin-bottom:9px;
display:block;
width:218px;
background-color:#050505;
border:none;
height:38px;
border-radius:6px;
color:#4b4b4b;
font-size:10px;
font-weight:900;
padding:0 15px;
box-shadow:0 1px 0 rgba(255,255,255,0.08);
}
.loginsubmit{
display:block;
margin:auto;
color:#b0b0b0;
font-size:12px;
font-weight:bold;
height:38px;
width:100px;
padding-bottom:3px;
border-radius:7px;
margin-top:15px;
border:none;
cursor:pointer;
background-color:#111111;
background-image:linear-gradient(top,#0c0c0c 0%,#111111 25%,#090909 50%,#000000 50%,#090909 75%,#0c0c0c 100%);
box-shadow:0 -1px 0 rgba(255,255,255,0.08) inset,0 0 5px rgba(0,0,0,0.7) inset,1px 0px 0px rgba(0,0,0,0.5) inset,-1px 0px 0px rgba(0,0,0,0.5) inset;
}
.loginsubmit:active{
background-color:#0b0b0b;
background-image:linear-gradient(top,#0b0b0b,#0b0b0b);
box-shadow:0 -1px 0 rgba(255,255,255,0.08) inset,0 0 7px rgba(0,0,0,0.9) inset,1px 0px 0px rgba(0,0,0,0.5) inset,-1px 0px 0px rgba(0,0,0,0.5) inset;
}
.close{
position:absolute;
width:16px;
height:16px;
display:block;
border-radius:17px;
color:#000000;
font-size:11px;
line-height:14px;
font-weight:bold;
text-shadow:none;
right:16px;
top:11px;
background-color:#000000;
box-shadow:0 -1px 0 rgba(255,255,255,0.2) inset;
transition:all 0.2s ease;
}
.close:hover{
color:#fff;
}
Tiếp theo ta sẽ tạo nút để hiện login-box và bóng mờ nền tối overlay.
Code .overlay{
position:absolute;
width:100%;
height:100%;
background-color:#222;
z-index:10;
}
.login-bar{
border-top:4px solid #222;
position:relative;
}
.login-button{
display:inline-block;
position:absolute;
right:15%;
background-color:#222;
color:#fff;
font-weight:bold;
padding:6px 15px 8px 15px;
border-radius:0 0 3px 3px;
text-transform:uppercase;
letter-spacing:1px;
}
Mã jQuery
Đầu tiên ẩn overlay và login đi với css display:none .
Code .overlay,.login{
display:none;
}
Sau đây ta sẽ dụng effect method fadeIn và fadeOut của jQuery để hiện login box khi click vào login-button và ẩn login box khi click vào close.
Code var overlay = $('.overlay');
var login = $('.login');
var body = $('body');
$('.login-button').click(function(e){
e.preventDefault();
body.css({'overflow':'hidden'};);
overlay.fadeIn(500,function(){
login.fadeIn(500);
};)
};);
$('.close').click(function(e){
e.preventDefault();
login.fadeOut(500,function(){
overlay.fadeOut(500);
body.css({'overflow':'visible'};);
};)
};)
Đầu tiên khi click vào login-button ta sẽ làm hiện nền overlay trong khoảng 0.5s sau đó tiếp theo sử dụng hàm callback hiện login box lên. Chú ý ta set thuộc tính overflow:hidden cho body để tắt chức năng cuộn chuột trong trường hợp trang web dài hơn chiều cao của màn hình trình duyệt.
Chữ ký: http://windowsworld.ucoz.com/
http://shareinfo.ucoz.org/
https://www.facebook.com/hdoantrannam
|
| |
|
|
