Hộp thoại (Modal) trong Bootstrap 3

Bootstrap 3 hỗ trợ thư viện model dùng để tạo hộp thoại hiển thị popup, hình ảnh và video. Dưới đây là cách sử dụng modal trong Bootstrap 3 chi tiết các bạn nhé

Tạo 1 modal đơn giản

TRước khi sử dụng tính năng Modal trong Bootstrap 3 chúng ta cần chắc chắn đã chèn  “modal.js” hoặc “bootstrap.js” hoặc “bootstrap.min.js” vào code của web.

<div class="container">
    <h3 id="vi-du-modal-trong-bootstrap-3">V&iacute; dụ Modal trong Bootstrap 3</h3>    
    <button class="btn btn-info btn-lg" data-target="#myModal" data-toggle="modal" type="button">Nhấn vào đây để mở Modal</button>    
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                    <h4 class="modal-title" id="phan-dau-modal">Phần đầu Modal</h4>
                </div>
                <div class="modal-body">
                    <p>Nội dung của Modal.</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal" type="button">Đóng</button>
                </div>
            </div>
        </div>
    </div>
</div>

Kết quả như sau:

Khi nhấn vào nút 

Giải thích ví dụ:

• Kích hoạt Modal: 
  • Để kích hoạt 1 Modal, chúng ta cần sử dụng 1 nút nhấn hoặc 1 liên kết. Sau đó thêm 1 thuộc tính: data-toggle=”modal” để mở cửa sổ modal, data-target=”#myModal” để chỉ đến id của modal cần mở. Thẻ div chứa modal phải có id tương ứng với giá trị id của thuộc tính data-target để kích hoạt modal cần hiển thị (trong ví dụ id là “myModal). 
  • Lớp .modal mô tả 1 modal và nội dung của nó. Lớp .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ỏ lớp 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. 
  • Lớp .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 lớp class=”modal-content” để định nghĩa phong cách cho modal (viền, màu nền, …).
  • Phần đầu (header) với lớp .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. Lớp .close để phong cách cho nút đóng, và lớp .modal-title để tạo phong cách cho văn bản phần đầu Modal.
  •  Lớp .modal-body để định nghĩa phong cách cho phần thân Modal.
  •  Lớp .modal-footer dùng để định nghĩa phong cách cho phần chân footer.

Kích thước Modal

Để thay đổi kích thước hoặc tạo modal kích thước phù hợp chúng ta sử dụng lớp

• .modal-sm cho các modal có kích thước nhỏ và lớp 
• .modal-lg cho các modal có kích thước lớn. 

Chúng ta thêm các lớp này trong thẻ div chứa lớp .modal-dialog. Ngoài ra, các bạn cũng có thể chỉnh kích thước bằng thuộc tính style="width:xxx;height:xxx".

<div class="modal-dialog modal-sm">
...</div>
 
<div class="modal-dialog modal-lg">
...</div>
 
<div class="modal-dialog" style="width: 200px; height: 100px;">
...</div>

Bài viết của chúng ta đến đây là hết rồi. Các bạn có thể sử dụng modal để chèn ảnh, video, slide ... làm cho web của mình sinh động hơn. Chúc các bạn thành công!