Bài 6: Tạo hộp thoại thông báo Modal – Dialog bằng jQuery

1

Trong bài học này. mình sẽ hướng dẫn các bạn cách tạo hộp thoại thông báo modal – dialog bằng jQuery. Bên cạnh đó, mình cũng so sánh hộp thoại modal tự tạo bằng jquery và modal trong Bootstrap.

Video – Tạo hộp thoại thông báo Modal – Dialog bằng jQuery

Ý tưởng

Ví dụ demo tạo hộp thoại thông báo Modal - Dialog bằng jQuery

+ Khi click vào nút mở hộp thoại. Thông báo sẽ hiện lên, nền sẽ mờ đi, để người dùng tập trung vào nội dung thông báo.

+ Khi click ra ngoài background hoặc click nút đóng. Hộp thoại sẽ đ1ong.

Cách thực hiện

+ Dùng hàm addClass()removeClass() trong jQuery

+ Để làm cho nền mờ, chúng ta sẽ thêm 1 khối phủ khắp màn hình và chia layer.

+ Mặc định hộp thoại và nền mờ sẽ ẩn bằng cách cho opacity: 0; và visibility: hidden;

opacity chỉ làm trong suốt, nhưng khối vẫn nằm đó, chúng ta không tương tác được với các khối bên dưới.

visibility: hidden để ẩn hoàn toàn.

thêm transition để hiệu ứng mượt mà. Còn cách ẩn hiện như thế nào thì do các bạn sáng tạo nhé. Trong bài này mình làm theo cách đi từ dưới lên.

Bài sau mình sẽ hướng dẫn thêm nhiều hiệu ứng khác.

+ Chúng ta tạo class hien-ra

.hien-ra{
   opacity: 1;
   visibility: visible;
   transition: 0.6s;
}

+ Khi click chuột vào nút open thì addClass(‘hien-ra’) cho background và hộp thoại.

+ Khi Click clode hoặc background thì removeClass(hien-ra’)

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên hệ