Bài 22: Modal trong Bootstrap 4

0
700

Xin chào các bạn, hôm nay bài viết này mình sẽ hướng dẫn tiếp cho các bạn về Modal trong Bootstrap 4 nhé. Modal là 1 thành phần giúp các bạn xây dựng các định dạng hộp thoại, hoặc những cửa sổ bật lên hiển thị trên đầu trang web. Những hộp thoại dạng này thường sử dụng để thông báo cho người dùng trên website về 1 vấn đề nào đó.

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, như sau:

Lưu ý: Thẻ button sẽ có thuộc tính data-toggle="modal"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 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.

Lưu ý: Modal mặc định ở dạng kích cỡ bình thường.

Ví dụ tổng kết

Dưới đây sẽ là ví dụ kèm hiển thị định dạng của Modal để các bạn tiện theo dõi thực hành nhé:

KẾT LUẬN

Như vậy mình đã hướng dẫn cho các bạn xong cách thức tạo ra 1 hộp thoại Modal trong Bootstrap 4 như thế nào rồi, rất đơn giản và nhanh chóng đúng không nào. Với Modal, các bạn không nhất thiết phải biết Javascript mà vẫn có thể tạo được các định dạng hộp thoại thông báo đẹp mắt và dễ sử dụng.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây