Bootstrap 4 Modal và các trick quen thuộc

Hi các bạn,

Về Bootstrap thì nó có cái đi kèm khá hay là Modal, nó đại loại như 1 popup (ít mắc dạy hơn) so với popup quảng cáo :v

Thì trong development, sẽ có 1 số tính năng mà có khi ta gặp fải và cần thằng này 😀

Về modal, mình sẽ BASED ON Bootstrap 4 nhé. (3 cũ oy hông chơi nữa)

1/ Khởi tạo Bootstrap 4 Modal

Dùng đoạn code sau đây là bạn sẽ tạo dc modal cơ bản 😀

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

Modal này size bình thường thoy, muốn size bự thêm thì ở đoạn này, thêm class modal-lg, nhỏ thì modal-sm:

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

2/ Mở và đóng Bootstrap 4 Modal

Về cơ bản, ta có thể trigger open Modal thông qua 2 attributes này:

• data-toggle=”modal”
• data-target=”_trỏ tới selector của modal_”

Demo:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open modal
</button>

Đôi khi ko fải mình đều trigger open như vậy. Vậy nếu fải xong ABC XYZ gì đó, mới mở thì sao? Thế thì thông qua JS ta sẽ có function này để trigger nó mở lên:

// example
$(selector).modal('show');

// demo
$("#myModal").modal('show');

Để đóng nó lại, ta sẽ có 3 chiêu:

1. Click bên ngoài modal
2. Thông qua 1 attributes đặc biệt, click vào nó sẽ đóng (lol)
3. JS

Chiêu 1 là tự hiểu nghen 😀

Chiêu 2 thì button close trong modal ấy, ta thêm attribute này:

// thêm attribute này
data-dismiss="modal"

// demo
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

Và chiêu 3, ta dùng JS như sau để đóng lại modal:

// ex:
$(selector).modal('hide');

// demo:
$("#myModal").modal('hide');

3/ Vài tricks nhỏ để chơi với thằng Bootstrap 4 Modal này

Tránh người dùng click bên ngoài để đóng modal hoặc nhấn ESC, thêm 2 attributes này vào .modal:

<div class="modal" id="myModal" data-backdrop="static" data-keyboard="false">

Cũng có cách tránh thông qua JS, mà cái này tiện hơn 😀

Modal nó cũng có mấy cái hooks để chúng ta xử lý, tham khảo tại: https://getbootstrap.com/docs/4.1/components/modal/#events

(Sẽ update thêm nếu nhớ <3)

Cám ơn các bạn đã quan tâm!