Bootstrap Modal

Trong hướng dẫn này, bạn sẽ học cách tạo modal với Bootstrap.

Tạo modal với Bootstrap

Modal về cơ bản là một hộp thoại hoặc cửa sổ bật lên được sử dụng để cung cấp thông tin quan trọng cho người dùng hoặc nhắc người dùng thực hiện các hành động cần thiết trước khi tiếp tục.

Modal được sử dụng rộng rãi để cảnh báo người dùng về các tình huống như hết thời gian phiên hoặc để nhận xác nhận cuối cùng của họ trước khi thực hiện bất kỳ hành động quan trọng nào như lưu hoặc xóa dữ liệu quan trọng.

Bạn có thể dễ dàng tạo các hộp thoại rất thông minh và linh hoạt với plugin Bootstrap Modal. Ví dụ sau mô tả cấu trúc cơ bản để tạo một modal đơn giản với tiêu đề, nội dung và chân trang chứa các nút hành động cho người dùng.

<!-- jQuery Code (to Show Modal on Page Load) -->
<script>
$(document).ready(function() {
    $("#myModal").modal("show");
});
</script>

<!-- Modal HTML -->
<div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Do you want to save changes to this document before closing?</p>
                <p class="text-secondary"><small>If you don't save, your changes will be lost.</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Nếu bạn thử ví dụ trên, nó sẽ tự động khởi chạy cửa sổ modal khi DOM được tải đầy đủ qua JavaScript. Đầu ra sẽ giống như sau:

Tạo modal với Bootstrap
Mẹo: Luôn cố gắng đặt modal HTML của bạn ở vị trí cấp cao nhất trong tài liệu của bạn, tốt nhất là trước khi đóng thẻ <body> (tức là </body>) để tránh can thiệp từ các phần tử khác, nếu không nó có thể ảnh hưởng đến giao diện hoặc chức năng của modal.

Kích hoạt Modal thông qua thuộc tính Data

Bạn có thể kích hoạt Bootstrap Modal bằng cách nhấp vào nút hoặc liên kết thông qua thuộc tính data mà không cần viết bất kỳ mã JavaScript nào. Hãy xem ví dụ sau để xem nó hoạt động như thế nào:

<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal" class="btn btn-lg btn-primary" data-bs-toggle="modal">Launch Demo Modal</a>
    
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Do you want to save changes to this document before closing?</p>
                <p class="text-secondary"><small>If you don't save, your changes will be lost.</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Ví dụ trên khởi chạy cửa sổ modal khi nhấp vào nút "Launch Demo Modal". Chúng ta hãy lần lượt xem qua từng phần của mã phương thức này để hiểu rõ hơn.

Giải thích mã

Để kích hoạt một Bootstrap Modal thông qua thuộc tính data, về cơ bản, chúng ta cần hai thành phần - phần tử điều khiển như button hoặc liên kết và bản thân phần tử modal.

  • Vùng chứa ngoài cùng của mọi modal trong document phải có một id duy nhất (trong trường hợp này id="myModal", là dòng số 5), để nó có thể được nhắm mục tiêu thông qua thuộc tính data-bs-target(đối với các button) hoặc thuộc tính href (đối với siêu liên kết) của phần tử điều khiển (dòng số2).
  • Thuộc tính data-bs-toggle="modal" bắt buộc phải thêm vào phần tử điều khiển (dòng số 2), như một button hoặc một siêu liên kết, cùng với một thuộc tính data-bs-target="#myModal" hoặc href="#myModal" để nhắm mục tiêu một modal cụ thể để chuyển đổi.
  • Lớp .modal-dialog (dòng số 6) đặt chiều rộng cũng như căn chỉnh theo chiều ngang và dọc của modal. Trong khi lớp .modal-content đặt các kiểu như văn bản và màu nền, đường viền, góc tròn, v.v.

Phần còn lại của vấn đề là tự giải thích, chẳng hạn như phần tử .modal-header định nghĩa tiêu đề cho modal thường chứa tiêu đề modal và nút đóng, trong khi phần tử .modal-body chứa nội dung thực tế như văn bản, hình ảnh, biểu mẫu, v.v. và phần tử .modal-footer định nghĩa chân trang thường chứa các nút hành động cho người dùng.

Lưu ý: Lớp .fade trên phần tử .modal thêm hiệu ứng mờ dần và trượt trong khi hiển thị và ẩn cửa sổ modal. Nếu bạn muốn modal xuất hiện đơn giản mà không có bất kỳ hiệu ứng nào, bạn có thể xóa lớp này. Ngoài ra, khi modal trở nên quá dài đối với khung nhìn hoặc thiết bị của người dùng, chúng sẽ cuộn độc lập với chính trang đó.

Kích hoạt Modal bằng JavaScript

Bạn cũng có thể kích hoạt cửa sổ modal thông qua JavaScript - chỉ cần gọi phương thức modal() Bootstrap với bộ chọnid hoặc class của modal trong mã JavaScript của bạn.

<script>
$(document).ready(function() {
    $("#myBtn").click(function() {
        $("#myModal").modal("show");
    });
});
</script>

Thay đổi kích thước của Modal

Bootstrap cung cấp cho bạn thêm tùy chọn để thay đổi kích thước của modal. Bạn có thể tạo các modal nhỏ, lớn cũng như cực lớn bằng cách thêm một lớp bổ sung .modal-sm, .modal-lg.modal-xl tương ứng trên .modal-dialog. Đây là một ví dụ:

<!-- Extra Large modal -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#extraLargeModal">Extra Large modal</button>
    
<div id="extraLargeModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Extra Large Modal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>          
            </div>
            <div class="modal-body">
                <p>Add the <code>.modal-xl</code> class on <code>.modal-dialog</code> to create this extra large modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>

<!-- Large modal -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#largeModal">Large modal</button>
    
<div id="largeModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Large Modal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>              
            </div>
            <div class="modal-body">
                <p>Add the <code>.modal-lg</code> class on <code>.modal-dialog</code> to create this large modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>
    
<!-- Small modal -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#smallModal">Small modal</button>
    
<div id="smallModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Small Modal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>       
            </div>
            <div class="modal-body">
                <p>Add the <code>.modal-sm</code> class on <code>.modal-dialog</code> to create this small modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>
Mẹo: Chiều rộng tối đa của modal mặc định sẽ là 500px, trong khi chiều rộng tối đa của modal nhỏ, lớn và cực lớn sẽ là 300px, 800px, 1140px.

Thay đổi nội dung modal dựa trên nút kích hoạt

Thường thì một số modal trên một trang web có nội dung gần như giống nhau với những khác biệt nhỏ.

Bạn có thể sử dụng các sự kiện của modal để tạo các cửa sổ modal hơi khác nhau dựa trên cùng một modal HTML. Ví dụ sau đây sẽ chỉ cho bạn cách thay đổi tiêu đề của cửa sổ modal theo giá trị thuộc tính data-title của nút kích hoạt.

<script>
$(document).ready(function() {
    $("#myModal").on("show.bs.modal", function(event) {
        // Get the button that triggered the modal
        var button = $(event.relatedTarget);

        // Extract value from the custom data-* attribute
        var titleData = button.data("title");

        // Change modal title
        $(this).find(".modal-title").text(titleData);
    });
});
</script>

Tạo modal căn giữa theo chiều dọc

Chỉ cần thêm lớp .modal-dialog-centered vào phần tử .modal-dialog để căn giữa modal theo chiều dọc. Nếu modal có nội dung dài, bạn có thể áp dụng thêm lớp .modal-dialog-scrollable trên .modal-dialog để làm cho nội dung modal có thể cuộn được. Đây là một ví dụ:

<!-- Button HTML (to Trigger Modal) -->
<a href="#modalCenter" role="button" class="btn btn-primary" data-bs-toggle="modal">Vertically Centered Modal</a>

<!-- Modal HTML -->
<div id="modalCenter" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Vertical Alignment Demo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Lorem ipsum dolor sit amet, consectetur elit...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">OK, Got it!</button>
            </div>
        </div>
    </div>
</div>

Sử dụng lưới bên trong modal

Bạn cũng có thể sử dụng hệ thống lưới Bootstrap để tạo bố cục lưới trong một modal. Đơn giản, sử dụng lớp .row để tạo hàng và sử dụng các lớp .col-*, .col-sm-*, .col-md-*, .col-lg-*.col-xl-* để tạo cột bên trong. Hãy xem một ví dụ:

<div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Send Us a Message</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-6">
                        <div class="form-group">
                            <label>First Name</label>
                            <input type="text" class="form-control">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label>Last Name</label>
                            <input type="text" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="form-group">
                            <label>Comments</label>
                            <textarea class="form-control"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Send Email</button>
            </div>
        </div>
    </div>
</div>

Tải nội dung trong modal bằng Ajax

Bạn cũng có thể tải nội dung cho modal Bootstrap thông qua Ajax.

Trong ví dụ sau, nội dung bên trong phần thân modal sẽ được chèn từ một tệp từ xa khi kích hoạt bằng phương thức load() của jQuery và sự kiện Bootstrap show.bs.modal.

<!-- jQuery Code (to Load Content via Ajax) -->
<script>
$(document).ready(function() {
    $("#myModal").on("show.bs.modal", function() {
        // Place the returned HTML into the selected element
        $(this).find(".modal-body").load("remote.php");
    });
});
</script>

<!-- Button HTML (to Trigger Modal) -->
<button type="button" class="btn btn-lg btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Launch Demo Modal</button>
    
<!-- Modal HTML -->
<div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ajax Loading Demo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Content will be loaded here from "remote.php" file -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">OK, Got it!</button>
            </div>
        </div>
    </div>
</div>
Mẹo: Bạn cũng có thể đặt tooltippopover trong modal nếu cần. Khi modal đóng, mọi tooltip và popover bên trong cũng tự động bị loại bỏ.

Tùy chọn

Có một số tùy chọn nhất định có thể truyền cho phương thức modal() Bootstrap để tùy chỉnh chức năng của một modal. Các tùy chọn có thể được truyền qua các thuộc tính data hoặc JavaScript.

Để đặt các tùy chọn modal thông qua các thuộc tính data, chỉ cần thêm tên tùy chọn vào data-bs-, chẳng hạn như data-bs-backdrop="static", data-bs-keyboard="false", v.v.

Tên Kiểu Giá trị mặc định Mô tả
backdrop boolean
or the string 'static'
true Phông nền modal (khu vực lớp phủ màu đen). Ngoài ra, bạn có thể chỉ định giá trị static để không đóng modal khi nhấp chuột vào phông nền.
keyboard boolean true Đóng cửa sổ modal khi nhấn phím Esc.
focus boolean true Đặt focus vào modal khi khởi tạo.
show boolean true Hiển thị modal khi khởi tạo hoặc kích hoạt.

Thuộc tính data cung cấp một cách dễ dàng để thiết lập các tùy chọn cho modal, tuy nhiên JavaScript là cách thích hợp hơn vì nó ngăn bạn khỏi công việc lặp đi lặp lại. Xem các ví dụ bên dưới để biết cách thiết lập tùy chọn cho modal bằng JavaScript.

Trong ví dụ sau, chúng tôi đã đặt tùy chọn backdrop thành static(dòng số 5) để ngăn modal đóng khi nhấp vào bên ngoài modal, tức là vùng phủ màu đen.

<!-- Button HTML (to Trigger Modal) -->
<button type="button" class="btn btn-lg btn-primary" data-bs-target="#myModal" data-bs-toggle="modal">Launch Demo Modal</button>

<!-- Modal HTML -->
<div id="myModal" class="modal fade" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Do you want to save changes to this document before closing?</p>
                <p class="text-secondary"><small>If you don't save, your changes will be lost.</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Các phương thức của modal

Đây là các phương thức chuẩn của bootstrap:

Truyền các tùy chọn cho modal

Ngoài ra, bạn có thể truyền các tùy chọn cho modal sử dụng đối tượng options.

Hãy thử ví dụ sau đây sẽ ngăn modal đóng khi người dùng nhấp vào phông nền (tức là vùng phủ màu đen đằng sau modal).

<script>
$(document).ready(function() {
    $("#myModal").modal({
        backdrop: "static"
    });
});
</script>

Ví dụ sau sẽ ngăn modal đóng khi nhấn phím esc.

<script>
$(document).ready(function() {
    $("#myModal").modal({
        keyboard: false
    });
});
</script>

toggle

Phương thức này có thể được sử dụng để bật một cửa sổ modal theo cách thủ công.

<script>
$(document).ready(function() {
    $("#myBtn").click(function() {
        $("#myModal").modal("toggle");
    });
});
</script>

show

Phương thức này có thể được sử dụng để mở một cửa sổ modal theo cách thủ công.

<script>
$(document).ready(function() {
    $("#myBtn").click(function() {
        $("#myModal").modal("show");
    });
});
</script>

hide

Phương thức này có thể được sử dụng để ẩn một cửa sổ modal theo cách thủ công.

<script>
$(document).ready(function() {
    $("#myBtn").click(function() {
        $("#myModal").modal("hide");
    });
});
</script>

handleUpdate

Phương thức này điều chỉnh lại vị trí của modal để chống lại hiện tượng giật xảy ra do sự xuất hiện của thanh cuộn khung nhìn trong trường hợp nếu chiều cao của modal cao hơn chiều cao của khung nhìn khi nó đang mở.

Một ví dụ phổ biến của trường hợp này là hiển thị các phần tử ẩn bên trong modal thông qua JavaScript hoặc tải nội dung bên trong modal bằng Ajax sau khi kích hoạt.

<script>
$(document).ready(function() {
    $("#showText").click(function() {
        $("#textBlock").show();
        $("#myModal").modal("handleUpdate");
    });
});
</script>

dispose

Phương thức này hủy modal của một phần tử (tức là loại bỏ dữ liệu được lưu trữ trên phần tử DOM).

<script>
$(document).ready(function() {
    $("#myBtn").click(function() {
        var myModal = bootstrap.Modal.getInstance($("#myModal")[0]);
        console.log(myModal);
        // {_element: div#myModal.modal.fade, _config: {…}, _dialog: div.modal-dialog, _backdrop: ke, _isShown: false, …}
        
        $("#myModal").modal("dispose");
        console.log(myModal);
        // {_element: null, _config: null, _dialog: null, _backdrop: null, _isShown: null, …}
    });
});
</script>

getInstance

Đây là một phương thức tĩnh cho phép bạn lấy thể hiện của modal được liên kết với một phần tử DOM.

<script>
$(document).ready(function() {
    $("#myBtn").click(function() {
        var modal = bootstrap.Modal.getInstance($("#myModal")[0]);
        console.log(modal);
        // {_element: div#myModal.modal.fade, _config: {…}, _dialog: div.modal-dialog, _backdrop: ke, _isShown: false, …}
    });
});
</script>

getOrCreateInstance

Đây là một phương thức tĩnh cho phép bạn lấy thể hiện của modal được liên kết với một phần tử DOM hoặc tạo một thể hiện mới trong trường hợp nếu modal chưa được khởi tạo.

<script>
$(document).ready(function() {
    $("#myBtn").click(function() {
        var modal = bootstrap.Modal.getOrCreateInstance($("#myModal")[0]);
        console.log(modal);
        // {_element: div#myModal.modal.fade, _config: {…}, _dialog: div.modal-dialog, _backdrop: ke, _isShown: false, …}
    });
});
</script>
Mẹo: Các phương thức tĩnh không thể được gọi trên các thể hiện của lớp (tức là các đối tượng). Chúng được gọi trực tiếp từ cấp lớp. Từ khóa static được sử dụng để định nghĩa một phương thức tĩnh cho một lớp.

Các sự kiện của modal

Lớp modal của Bootstrap bao gồm một số sự kiện để kết nối vào chức năng modal.

Sự kiện Mô tả
show.bs.modal Sự kiện này kích hoạt ngay lập tức khi phương thức show được gọi.
shown.bs.modal Sự kiện này được kích hoạt khi modal đã được hiển thị cho người dùng. Nó sẽ đợi cho đến khi quá trình chuyển đổi CSS hoàn tất trước khi bị kích hoạt.
hide.bs.modal Sự kiện này được kích hoạt ngay lập tức khi phương thức hide được gọi.
hidden.bs.modal Sự kiện này được kích hoạt khi modal hoàn tất bị ẩn khỏi người dùng. Nó sẽ đợi cho đến khi quá trình chuyển đổi CSS hoàn tất trước khi bị kích hoạt.
hidePrevented.bs.modal Sự kiện này được kích hoạt khi modal được hiển thị, tùy chọn backdrop của nó được đặt thành static và một lần nhấp bên ngoài modal được thực hiện hoặc tùy chọn keyboard được đặt thành false và thực hiện nhấn phím esc.

Ví dụ sau sẽ hiển thị một thông báo cảnh báo cho người dùng khi cửa sổ modal tắt.

<script>
$(document).ready(function() {
    $("#myModal").on("hidden.bs.modal", function() {
        alert("Modal window has been completely closed.");
    });
});
</script>

Ví dụ sau sẽ hiển thị thông báo cảnh báo nếu bạn cố gắng đóng modal bằng cách nhấp vào vùng tối.

<script>
$(document).ready(function(){
    $("#myModal").on("hidePrevented.bs.modal", function(){
        alert("Modal can't be closed by clicking outside, because the backdrop option is set to static.");
    });
});
</script>
BootstrapBootstrap Nâng Cao
Bài Viết Liên Quan:
Bootstrap Toast
Trung Nguyen 14/04/2022
Bootstrap Toast

Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.

Bootstrap ScrollSpy
Trung Nguyen 13/04/2022
Bootstrap ScrollSpy

Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.

Bootstrap Typeahead
Trung Nguyen 13/04/2022
Bootstrap Typeahead

Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.

Bootstrap Carousel
Trung Nguyen 12/04/2022
Bootstrap Carousel

Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.