Modal trong Bootstrap 4

• 12-07-2020 21:50:53
• by: baobinhnet

Modal trong Bootstrap cũng là một trong những thành phần chúng ta thường xuyên sử dụng trong thực tế để tạo các popup Modal của website. Trong bài này chúng ta sẽ tập trung vào việc nghiên cứu các class bootstrap  phục vụ cho việc tạo Modal. Ok, giờ thì chúng ta bắt đầu thôi.

Cách tạo Modal trong Bootstrap 4

Thông thường để có thể tạo được hộp thoại thì các bạn sẽ sử dụng tới Javascript, nhưng Bootstrap 4 cũng đã có các class mẫu hỗ trợ việc này.

Để tạo 1 Modal trong Bootstrap 4, đầu tiên mình sẽ chuẩn bị 1 nút button để chúng ta click và hiển thị lên hộp thoại Modal
Lưu ý: Thẻ button sẽ có thuộc tính data-toggle="modal" và data-target="#myModal", myModal sẽ là id của vùng hộp thoại hiển thị lên.

Sau khi đã có nút click, chúng ta sẽ đi xây dựng khối Modal hiển thị lên, như sau:


 

Modal có hiệu ứng chuyển động

Sử dụng class .fade để thêm hiệu ứng chuyển động dạng fade khi các bạn mở hoặc đóng Modal.

Ví dụ:

 

Kích cỡ của Modal

Để thay đổi kích cỡ to nhỏ cho Modal, chúng ta thêm class .modal-sm cho dạng Modal nhỏ hoặc thêm class .modal-lg cho dạng Modal lớn.

 

KẾT LUẬN

Vậy là chúng ta đã học xong một class nữa trong bootstrap 4 để tạo Modal box. Chúc các bạn học tốt và ứng dụng được trong thực tế. Hẹn gặp lại các bạn ở bài tiếp theo.

 

---

• Posted by baobinhnet
• 2020-07-12 21:50:53