Tự học Bootstrap - Cơ bản - bài 28 – Popup Modal

Popup Modal Plugin

Popup Modal là 01 hộp thoại hiển thị trong phần trên cùng của trang hiện hành.

Mẹo: Plugins này có thể đi kèm với 01 file (nếu là Bootstrap's thì là file "modal.js" file), hoặc tất cả trong 01 (nếu dùng "bootstrap.js" hoặc "bootstrap.min.js").

---

Cách tạo 01 popup Modal

Ví dụ sau hiển thị 01 popup modal cơ bản.

<!-- 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 "Trigger":

Để mở 01 cửa sổ popup modal, bạn cần dùng 01 nút hoặc 01 liên kết.

Sau đó thêm 02 thuộc tính data-*

• data-toggle="modal" để mở cửa sổ modal.
• data-target="#myModal" trỏ đến id của modal

Phần "Modal":

Thẻ cha <div> của modal phải có 01 ID và giá trị này phải trùng với giá trị thuộc tính data-target dùng để mở cửa sổ modal (giá trị "myModal").

Lớp .modal xác định nội dung của thẻ <div> như là 01 cửa sổ modal và đặt focus lên nó.

Lớp .fade thêm 01 hiệu ứng chuyển mờ dần in và out. Xóa lớp này đi nếu bạn thấy không cần hiệu ứng này.

Thuộc tính role="dialog" được phát triển cho người dùng sử dụng phần mềm đọc screen reader.

Lớp .modal-dialog thiết lập bề rộng và canh lề phù hợp cho cửa sổ modal.

Phần "Nội dung Modal":

Thẻ <div> với lớp class="modal-content" định kiểu cho cửa sổ modal (đường viền, màu nền...) Bên trong thẻ <div> này, ta thêm phần tiêu đề , phần thân, và phần footer của cửa sổ modal.

Lớp .modal-header được dùng để xác định kiểu cho phần tiêu đề của cửa sổ modal. Thẻ <button> bên trong tiêu đề có 01 thuộc tính data-dismiss="modal" mà khi bạn bấm chuột vào sẽ đóng cửa sổ modal lại. Lớp .close định kiểu cho nút đóng, và lớp .modal-title định kiểu cho phần tiêu đề với 01 cỡ chữ phù hợp.

Lớp .modal-body được dùng để xác định kiểu phần thân cửa sổ modal. Bạn có thể thêm bất kỳ thẻ HTML ; đoạn văn, hình ảnh, videos,...ở đây.

Lớp .modal-footer được dùng để xác định kiểu cho phần footer của cửa sổ modal. Chú ý rằng khu vực này được canh lề phải mặc định.

---

Kích cỡ cửa sổ Modal

Thay đổi kích cỡ cửa sổ modal bằng cách thêm lớp .modal-sm dùng cho cửa sổ nhỏ và lớp .modal-lg dùng cho cửa sổ lớn.

Thêm kích cỡ vào thẻ <div> bằng lớp .modal-dialog:

Cửa sổ Modal cỡ nhỏ

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

Cửa sổ Modal cỡ lớn

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

Mặc định, các cửa sổ modals có kích thước trung bình.

Lophocvitinh.COM***Tự học Bootstrap - Phần cơ... bởi minh-nguyen48