HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap Modal Plugin

❮ Trước Kế tiếp ❯

Plugin Modal

Plugin Modal là một hộp thoại / cửa sổ bật lên được hiển thị trên đầu trang hiện tại:

Mẹo: Các plugin có thể được bao gồm riêng lẻ (sử dụng tệp "modal.js" riêng lẻ của Bootstrap) hoặc tất cả cùng một lúc (sử dụng "bootstrap.js" hoặc "bootstrap.min.js").

Cách tạo phương thức

Ví dụ sau đây cho thấy cách tạo một phương thức cơ bản:

Thí dụ

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Giải thích ví dụ

Phần "Kích hoạt":

Để kích hoạt cửa sổ phương thức, bạn cần sử dụng một nút hoặc một liên kết.

Sau đó, bao gồm hai thuộc tính data- *:

  • data-toggle="modal"mở cửa sổ phương thức
  • data-target="#myModal"trỏ đến id của phương thức

Phần "Phương thức":

Cha <div>của phương thức phải có ID giống với giá trị của thuộc tính data-target được sử dụng để kích hoạt phương thức ("myModal").

Lớp .modalxác định nội dung của <div>như một phương thức và tập trung vào nó.

Lớp .fadethêm vào một hiệu ứng chuyển tiếp làm mờ phương thức trong và ngoài. Loại bỏ lớp này nếu bạn không muốn có hiệu ứng này.

Thuộc tính này role="dialog"cải thiện khả năng tiếp cận cho những người sử dụng trình đọc màn hình.

Lớp .modal-dialogthiết lập chiều rộng và lề thích hợp của phương thức.

Phần "Nội dung phương thức":

Với "tạo kiểu cho phương thức (đường viền, màu nền, v.v.). Bên trong phần này <div>, hãy thêm đầu trang, nội dung và chân trang của phương thức.class="modal-content<div>

Lớp .modal-headerđược sử dụng để xác định kiểu cho tiêu đề của phương thức. Bên <button>trong tiêu đề có một data-dismiss="modal"thuộc tính đóng phương thức nếu bạn nhấp vào nó. Lớp .closetạo kiểu cho nút đóng và .modal-titlelớp tạo kiểu cho tiêu đề với chiều cao dòng thích hợp.

Lớp .modal-bodyđược sử dụng để xác định kiểu cho phần thân của phương thức. Thêm bất kỳ đánh dấu HTML nào tại đây; đoạn văn, hình ảnh, video, v.v.

Lớp .modal-footerđược sử dụng để xác định kiểu cho phần chân của phương thức. Lưu ý rằng khu vực này được căn phải theo mặc định.

Kích thước phương thức

Thay đổi kích thước của phương thức bằng cách thêm .modal-sm lớp cho phương thức nhỏ hoặc  .modal-lglớp cho phương thức lớn.

Thêm lớp kích thước vào <div>phần tử có lớp .modal-dialog:

Phương thức nhỏ

<div class="modal-dialog modal-sm">

Phương thức lớn

<div class="modal-dialog modal-lg">

Theo mặc định, các phương thức có kích thước trung bình.

Tham khảo đầy đủ phương thức Bootstrap

Để có tài liệu tham khảo đầy đủ về tất cả các tùy chọn phương thức, phương thức và sự kiện, hãy truy cập Tham khảo phương thức Bootstrap JS của chúng tôi .


❮ Trước Kế tiếp ❯