Tạo các hộp thoại Modal trong Bootstrap

Các hộp thoại Modal được tạo ra với cấu trúc sau, chia làm 3 phần phần Header, Body và Footer

<div class="modal fade" id="dialog1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
        
            <div class="modal-header">
                <h5 class="modal-title">Tiêu đề Hộp thoại</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            
            <div class="modal-body">
                Trình bày các thành phần của Hộp thoại ở đây
            </div>
            
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Đóng</button>
                <button type="button" class="btn btn-primary">Lưu lại</button>
            </div>
            
        </div>
    </div>
</div>

Với mã trên có id của hộp thoại là #dialog1, mặc định hộp thoại ẩn, để kích hoạt hiện thị có thể làm như sau:

Mở hộp thoại bằng JS

Khi muốn bật hộp thoại trên, chạy code sau:

<script>
    $('#dialog1').modal('show')
</script>

Khai báo phần tử kích hoạt hộp thoại

Có thể khai báo các nút bấm với thông số như sau để thư viện Bootstrap tự chạy JS và mở hộp thoại khi nhấn vào nút bấm

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#dialog1">
    Mở hộp thoại
</button>

Để điều chỉnh cỡ hộp thoại: cho thêm vào .modal-dialog các lớp: .modal-lg tạo hộp thoại lớn, .modal-sm tạo hộp thoại nhỏ

Một số hàm JS cho Modal

• .modal('show') hiện thị hộp thoại
• .modal('hide') ẩn hộp thoại