Thứ Năm, 24 tháng 12, 2015

Tạo hiệu ứng Dialog Box

12/24/2015 04:06:00 CH    No comments
Untitled Document

[jQuery] Hướng dẫn tạo hiệu ứng Dialog Box đơn giản

Cập nhật lần cuối ngày 05/01/2015 trong Javascript - jQuery

Dialog, Lightbox hay Popup là những thuật ngữ quen thuộc trong Jquery. Nó giúp mở một cửa sổ nhỏ, nổi bật giữa trang web để hiện thông báo hướng dẫn, giới thiệu hay tạo một form lấy thông tin từ người dùng. Những box như vậy tương tác ngay trên trang hiện tại mà không cần mở trang mới, điều này tạo sự thân thiện và thích thú với người xem.
Bài viết này, chúng ta sẽ tạo một box đăng nhập đơn giản, sử dụng HTML, CSS và jQuery.
Hiệu ứng Dialog Box đơn giản
Demo Source code

HTML

Code html bao gồm 2 thành phần cơ bản:
Tạo một button để khi click vào thì form đăng nhập được show ra:


01

<a class="login-window button" href="#login-box">Đăng nhập</a>

Sau đó là lớp “.login”, chính là form đăng nhập như sau:


01
02
03
04
05
06
07
08
09
10
11
12
13
14

<div class="login" id="login-box">Đăng nhập

 <a class="close" href="#"><img class="img-close" title="Close Window" alt="Close" src="close.png" /></a>
<form class="login-content" action="#" method="post"><label class="username">
 <span>Tên hoặc email</span>
 <input id="username" type="text" autocomplete="on" name="username" placeholder="Username" value="" />
 </label>
 <label class="password">
 <span>Mật khẩu</span>
 <input id="password" type="password" name="password" placeholder="Password" value="" />
 </label>
 <button class="button submit-button" type="button">Đăng nhập</button>

 <a class="forgot" href="#">Quên mật khẩu?</a></form></div>

Mã html trên hoàn toàn dễ hiểu, nên mình sẽ không tập trung nhiều.

CSS

01
02
03
04
05
06
07
08
09
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

/*phần tử phủ toàn màn hình,không được hiển thị*/
#over {
    display: none;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: 999;
}
a, a:visited, a:active{
    text-decoration:none;
}
.login
{
    background-color:#85B561;
    height:auto;
    width:450px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:14px;
    padding-bottom:5px;
    display:none;
    overflow:hidden;
    position:absolute;
    z-index:99999;
    top:10%;
    left:50%;
    margin-left:-300px;
}

.login .login_title
{
    color:white;
    font-size:16px;
    padding:8px 0 5px 8px;
    text-align:left;
}

.login-content label {
    display: block;
    padding-bottom: 7px;
}

.login-content span {
    display: block;
}
.login-content
{
    padding-left:35px;
    background-color:white;
    margin-left:5px;
    margin-right:5px;
    height:auto;
    padding-top:15px;
    overflow:hidden;
}

.img-close {
    float: right;
    margin-top:-43px;
    margin-right:5px
}
.button{
    display: inline-block;
    min-width: 46px;
    text-align: center;
    color: #444;
    font-size: 14px;
    font-weight: 700;
    height: 36px;
    padding: 0px 8px;
    line-height: 36px;
    border-radius: 4px;
    transition: all 0.218s ease 0s;
    border: 1px solid #DCDCDC;
    background-color: #F5F5F5;
    background-image: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1);
    cursor: pointer;
}
.button:hover{
     border: 1px solid #DCDCDC;
    text-decoration: none;
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    box-shadow: 0 2px 2px rgba(0,0,0,0.1);
}
.login input
{
    border:1px solid #D5D5D5;
    border-radius:5px;
    box-shadow:1px 1px 5px rgba(0,0,0,.07) inset;
    color:black;
    font:12px/25px "Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    height:28px;
    padding:0px 8px;
    word-spacing:0.1em;
    width:300px;
}
.submit-button{
    display: inline-block;
    padding: auto;
    margin: 15px 75px;
    width: 150px;
}

Xem đoạn css trên, bạn cần chú ý tới 2 thành phần quan trọng:
Phần tử “#over”: là lớp phủ toàn màn hình, bạn ẩn nó bằng cách đặt display: none và để z-index: 999 để nó hiện  nổi bật hơn các phần tử nền. Ngoài ra position: fixed để cố định vị trí cho nó đồng thời đặt opacity: 0,8để làm mờ trang.
Thứ 2 là form đăng nhập: lớp “.login” bạn đặt z-index: 99999, lớn hơn phần tử “#mask”, vì nó sẽ nổi bật nhất trên trang web.
Các thuộc tính còn lại, bạn có thể tùy chỉnh theo ý mình sao cho đẹp nhất.

Jquery

Phần quan trong nhất là jquery. Bạn nhớ là load thư viện jquery vào trước nhé


01

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Ở đây mình dùng thư viện jquery phiên bản 1.10.2


01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$(document).ready(function() {
    $('a.login-window').click(function() {
        //lấy giá trị thuộc tính href - chính là phần tử "#login-box"
        var loginBox = $(this).attr('href');

        //cho hiện hộp đăng nhập trong 300ms
        $(loginBox).fadeIn(300);

        // thêm phần tử id="over" vào sau body
        $('body').append('<div id="over">');
        $('#over').fadeIn(300);

        return false;
 });

 // khi click đóng hộp thoại
 $(document).on('click', "a.close, #over", function() {
       $('#over, .login').fadeOut(300 , function() {
           $('#over').remove();
       });
      return false;
 });
});

Mã jquery sẽ xử lý 2 sự kiện chính:
Khi click vào nút đăng nhập: $('a.login-window').click(function():
Câu lệnh var loginBox = $(this).attr('href') sẽ lấy thuộc tính href – chính là “#login-box” . Bạn xem lại mã html ta đã có:
<a href="#login-box" class="login-window button">Đăng nhập</a>
Hàm fadeIn(300) sẽ hiện dần hộp đăng nhập trong 300ms. Bạn có thể thay đổi thời gian này và nhớ là đơn vị tính bằng ms. Hoặc cũng có thể dùng fadeIn(“slow”), fadeIn(“fast”) để lớp hiện ra chậm hay nhanh.
Câu lệnh $('body').append('<div id="over"></div>') sẽ thêm vào cuối thẻ body id “#over” mà ta đã style cho nó ở phần CSS. Sau đó là show nó ra thôi.
Sự kiện thứ 2: khi ta click vào nút đóng cửa sổ hoặc click vào lớp phủ nền “#over” thì cửa sổ đăng nhập sẽ đóng lại.
Hãy chú ý câu lệnh $(document).on('click', "a.close, #over", function(){….})
Các bạn sẽ thắc mắc tại sao không dùng $(“a.close, #over”).on(). Bởi vì, phần tử “#over” được thêm vào sau khi tài liệu ( gồm cả mã jquery trên ) được load nên nếu dùng như vậy thì hộp thoại sẽ không bị ảnh hưởng khi ta click vào nền. Do vậy sử dụng $(document).on() là hợp lý. Cái này bạn tự test để kiểm tra và xem thêm về hàmon() tại http://api.jquery.com/on/.
Nhiều bạn có thể sử dụng hàm live() thay cho hàm on(). Tuy nhiên từ phiên bản jquery 1.9 thì hàm live()không được hỗ trợ nữa và nó sẽ không hoạt động.
Hàm fadeOut() là công việc ngược lại hàm fadeIn(), ẩn mờ dần box đăng nhập, còn hàm remove() sẽ loại bỏ phần tử “#over” khỏi tài liệu.
Như vậy là chúng ta đã tạo được một box dialog đơn giản để điền thông tin đăng nhập. Bạn hãy thực hành và tạo những hiệu ứng và style đẹp hơn mà mình thích.

Lời kết

Mình nghĩ rằng không khó để tìm ra những plugin tạo lightbox hay dialog trên mạng. Rất nhiều, tuy nhiên nếu các bạn tự tay xây dựng cho mình một sản phẩm riêng thì vẫn thích thú hơn đúng không? Nhất là những bạn đang bắt đầu với jquery. Hy vọng bài viết sẽ có ích với các bạn. Hãy comment bên dưới nếu bạn cần trao đổi nhé!

0 nhận xét:

Đăng nhận xét