Sử dụng Modal trong Bootstrap

Giới thiệu nội dung bài viết

Chào các bạn,hôm nay anh sẽ hướng dẫn mọi người về modal là gì? Các sử dụng nó trong lập trình website.

1. Tạo Modal trong Bootstrap 4

Khi chúng ta muốn hiển thị một dialog hoặc một popup trên website thì sử dụng modal

modal1


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open modal
</button>

<!-- The Modal -->
<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">&times;</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>

2. Thêm hiệu ứng Modal trong Bootstrap 4

Chúng ta sử dụng class .fade để thêm hiệu ứng khi mở và đóng modal


1
2
3
4
5
<!-- Fading modal -->
<div class="modal fade"></div>

<!-- Modal without animation -->
<div class="modal"></div>

3. Tăng kích thước Modal trong Bootstrap 4

Chúng ta có thể thêm kích thước của modal to hay nhỏ bằng cách sử dụng class .modal-sm hoặc modal-lg hoặc .modal-xl


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


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


1
<div class="modal-dialog modal-xl">

Mặc định modal có kích thướt trung bình.

4. Modal nằm giữa màn hình trong Bootstrap 4

Để tạo modal nằm giữa màn hình chúng ta dùng class .modal-dialog-centered


1
<div class="modal-dialog modal-dialog-centered">

5. Modal có thanh cuộn nếu nội dung bên trong nhiều

Chúng ta có thể thêm scrollbar vào bằng việc sử dụng class .modal-dialog-scrollable .modal-dialog


1
<div class="modal-dialog modal-dialog-scrollable">

Mọi người hãy subcribe kênh youtube dưới đây nhé. Videos về các kỹ năng mềm và lập trình sẽ được cập nhật hằng tuần


Comments