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
"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".
+ 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() và removeClass() trong jQuery
Có làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì.
+ Để 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ệ
