bootstrap modal plugin

Modal plugin

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 khi người dùng Click vào nút button.

Lưu ý: Các plugin có thể được thêm vào riêng lẻ (bằng cách sử dụng file "modal.js" riêng lẻ của Bootstrap) hoặc sử dụng file "bootstrap.js" hoặc "bootstrap.min.js".

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

Ví dụ bên dưới trình bày cách tạo một phương thức modal cơ bản.

Ví dụ

<!-- Kích hoạt phương thức gọi modal -->
<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>

Xem kết quả

Giải thích ví dụ

Phần "Kích hoạt phương thức":

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

Sau đó, thê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 "Modal":

Thẻ 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 .modal xác định nội dung của thẻ <div> như một phương thức và tập trung vào nó.

Lớp .fade thê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 chúng ta không muốn có hiệu ứng này.

Thuộc tính 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-dialog thiết lập chiều rộng và lề thích hợp cho phương thức.

Phần "Modal Content":

Để "tạo kiểu cho phương thức (đường viền, màu nền, v.v.). Bên trong thẻ <div>, chúng ta thêm các lớp .modal-header, .modal-body và .modal-footer vào phương thức .class="modal-content bên trong thẻ <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 trong tiêu đề có một button với thuộc tính data-dismiss="modal"để đóng phương thức khi người dùng nhấp vào nó. Lớp .close tạo kiểu cho nút đóng và lớp .modal-title 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. Chúng ta có thể thêm bất kỳ thẻ nội dung HTML nào tại đây: text, 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 ý là vùng chọn này được căn phải theo mặc định.

Kích thước của hộp Modal

Chúng ta có thể thay đổi kích thước của phương thức modal bằng cách thêm lớp .modal-sm cho phương thức nhỏ hoặc lớp .modal-lg cho phương thức lớn.

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

Ví dụ phương thức modal có kích thước nhỏ

Ví dụ

<!-- Kích hoạt phương thức gọi modal -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal Small</button>

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

    <!-- 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>

Xem kết quả

Ví dụ về phương thức modal có kích thước lớn

Ví dụ

<!-- Kích hoạt phương thức gọi modal -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal Large</button>

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

    <!-- 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>