Bài 7: Tạo hộp thoại modal với animation và chạy tự động

0

Trong bài này, mình sẽ hướng dẫn các bạn cách tạo hộp thoại modal với animation và chạy tự động theo thời gian đặt trước.

Video – Tạo hộp thoại modal với animation và chạy tự động

Ý tưởng

+ Cách tạo modal tương tự như bài 6. bắt sự kiện tương tác và add/remove Class css bằng jQuery.

+ Mọi animation hay chuyển động đều chỉnh bằng css để tối ưu, giảm code js.

+ Tạo tính năng chạy tự động bằng hàm setInterval()

Kiến thức mới

+ Thuộc tính animationperpective (tạo hiệu ứng 3D).

+ Hàm setInterval() trong jQuery để chạy theo thời gian đặt trước.

Hướng dẫn chi tiết xem video nhé.

Hướng dẫn chi tiết

Phần HTML

+ 1 button

+ 1 hộp thoại gồm 1 thẻ img và 1 button đóng. Bao ngoài khối hộp thoại là một khối div có thuộc tính perpective để tạo hiệu ứng 3D

+ 1 background

<div class="cac-nut">
   <button class="open">Mở hộp thoại</button>
</div>
<div class="background"></div>
<div class="khoi">
   <div class="hop-thoai">
      <img src="img/1.png" alt="">
      <button class="close">&times;</button>
   </div>
</div>

Phần CSS

Mình chỉnh nêu một số đoạn code chính, chi tiết bạn xem video và code mẫu cuối bài.

Khối bao ngoài của hộp thoại cần có thuộc tính perpective

.khoi{
  perspective: 1500px;
}

Hộp thoại

.hop-thoai {
   width: 500px;
   position: absolute;
   top: 27%;
   left: 50%;
   margin-left: -250px;
   opacity: 0;
   visibility: hidden;
   transform: translateZ(-1500px) rotateY(70deg);
}

Phần JS – jQuery

Để cho hộp thoại tự động bật lên khi vào web, các bạn đem toàn bộ code hiện hộp thoại ra ngoài, không để trong hàm click của button.

Để tắt hộp thoại sau một khoảng thời gian. Các bạn dùng setInterval() và gán hàm này cho 1 biến. Sau khi chạy xong, chúng ta sẽ xóa lệnh đặt thời gian này.

$(".hop-thoai").addClass('show');
$(".background").addClass('show');

var banner = setInterval(function(){
$(".hop-thoai").removeClass('show');
$(".background").removeClass('show');
clearInterval(banner);
},2000);

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ệ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.