Bootstrap 4 Modal

Giới thiệu

Bài viết sẽ giúp các bạn tạo 1 modal (hộp thoại) trong Bootstrap. Modal là 1 thành phần cần thiết trong thiết kế Web dùng để hiển thị popup, video và hình ảnh...

Bootstrap cho phép bạn thêm một modal dialog vào trang web của bạn. Một modal là một dialog box lấy nét trong khi phần còn lại của màn hình bị mờ hoặc xám. Điều này buộc người dùng thực hiện hành động trên dialog box trước khi tiếp tục.

Để tạo ra một modal, sử dụng class .modal cùng với các class khác .modal-* để xác định từng phần của phương thức này.

Giải thích ví dụ:

Phần “Trigger”:

• Để hiển thị modal, bạn tạo 1 link hoặc button.

• Sau đó, thêm 2 thuộc tính sau cho link hoặc button vừa tạo:

  data-toggle=”modal”: dùng để mở modal window.

  data-target=”#myModal”: dùng để nhận biết modal nào thông qua id.

Phần “Modal”:

• Tạo 1 div container có id là #myModal (chính là id mà data-target trong phần Trigger sử dụng).
• Class .modal mô tả 1 modal và nội dung của nó.
• Class .fade dùng để thêm hiệu ứng fade (mờ dần) khi modal xuất hiện hoặc biến mất, bạn có thể bỏ class này nếu không muốn modal có hiệu ứng fade.
• Thuộc tính role=”dialog” để tạo 1 hộp thoại cho modal nổi giữa màn hình, các vùng khác ngoài hộp thoại sẽ hiện màu tối.
• Class .modal-dialog để thiết lập chiều rộng và lề (margin) cho modal.

Phần “nội dung Modal”:

• Phần tử div với class=”modal-content” để định nghĩa phong cách cho modal (viền, màu nền, …).
• Bên trong phần tử div, chúng ta có thể thêm phần đầu (header), phần thân (body) và phần chân (footer) của modal.
• Class .modal-header định nghĩa phong cách phần đầu modal.
• Nút bên trong phần đầu có thuộc tính data-dismiss=”modal” để đóng modal nếu được nhấn.
• Class .close để phong cách cho nút đóng, và class .modal-title để tạo phong cách cho văn bản phần đầu modal.
• Class .modal-body để định nghĩa phong cách cho phần thân modal.
• Class .modal-footer dùng để định nghĩa phong cách cho phần chân footer.

Kích thước Modal

Để tạo thay đổi kích thước modal, chúng ta có thể thêm class .modal-sm cho các modal có kích thước nhỏ và class .modal-lg cho các modal có kích thước lớn. Bạn thêm các class này trong thẻ div chứa class .modal-dialog. Ngoài ra, bạn có thể chỉnh kích thước bằng thuộc tính style=”awidth:xxx; height:xxx”.

Small Modal

Đối với một modal dialog nhỏ, hãy thêm class .modal-sm vào .modal-dialog

Large Modal

Đối với một modal dialog lớn, hãy thêm class .modal-lg vào .modal-dialog

Remove Fade Effect

Bạn có thể loại bỏ class .fade để loại bỏ hiệu ứng fade-in / fade-out.

Kết luận:

Như vậy, bài viết đã hướng dẫn cho các bạn cách tạo 1 modal đơn giản trong Bootstrap, bạn có thể chèn thêm video, form, hình ảnh, … để làm nội dung của modal phong phú hơn.

Tham khảo:

https://www.quackit.com/bootstrap/bootstrap_4/tutorial/