Bài 14: Sử dụng Modal trong Bootstrap v5.3

Bài 14: Sử dụng Modal trong Bootstrap v5.3

Modal trong Bootstrap được sử dụng rất nhiều hiện nay, nhiệm vụ của nó là bật ra một khung hộp thoại có thể chứa tất cả những gì bạn muốn vào trong đó.

Giới thiệu về Modal trong Bootstrap

Modal trong Bootstrap dùng để bật một hộp thoại khi bạn muốn view một thông tin nào đó đến cho người xem, nó cũng hiển thị kiểu kiểu như Popup.

Modal được sử dụng rất phổ biến hiện nay, vì trên 1 trang web không thể hiển thị hết các thông tin được, nên khi nào cần view thông tin thì người dùng có thể bấm vào và hiển thị lên để xem, xem xong có thể tắt xuống.

Ví dụ khi bấm vào button thì mở ra hộp thoại “Chào mừng bạn đền với website sonnguyenaz.com“:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Hiển thị modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">sonnguyenaz.com</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Chào mừng bạn đến với website sonnguyenaz.com!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả khi bạn bấm nút:

Các ví dụ về Modal trong Bootstrap

Các cách để tắt hộp thoại

Thông thường một hộp thoại Modal mở lên ta sẽ có 2 cách để tắt đó là bấm vào nút X, Close hoặc bấm vào vùng trống màn hình.

Nếu bạn muốn cố định modal bắt buộc phải tắt bằng nút bấm ta sẽ sử dụng thuộc tính: data-bs-backdrop=”static”

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Hiển thị modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">sonnguyenaz.com</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Chào mừng bạn đến với website sonnguyenaz.com!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả là khi chúng ta click vào vùng trống thì Modal sẽ không bị ẩn đi mà phải nhấn vào nút tắt.

Nếu bạn muốn tạo nhiều nút Close thì chỉ cần thêm vào thuộc tính: data-bs-dismiss=”modal”

Điều chỉnh kích thước Modal Bootstrap

Chế độ toàn màn hình

Để Modal full màn hình bạn sử dụng thuộc tính: modal-fullscreen

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Hiển thị modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">sonnguyenaz.com</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Chào mừng bạn đến với website sonnguyenaz.com!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
    <!-- End Example Code -->
  </body>
</html>

Các kích thước khác cho Modal Bootstrap

Ngoài ra bạn cũng có thể điều chỉnh kích thước với các thuộc tính sau:

SizeClassModal max-width
Small.modal-sm300px
DefaultNone500px
Large.modal-lg800px
Extra large.modal-xl1140px
Điều chỉnh kích thước Modal trong Bootstrap

Tạo thanh cuộn cho Modal

Nếu nội dung của hộp thoại quá nhiều như bảng danh sách chẳng hạn thì bạn có thể sử dụng thanh cuộn bằng thuộc tính: modal-dialog-scrollable

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Hiển thị modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">sonnguyenaz.com</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Chào mừng bạn đến với website sonnguyenaz.com!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả là:

Căn giữa màn hình

Nếu không muốn hiển thị ở trên cùng thì chúng ta cũng có thể căn vào giữa màn hình theo chiều dọc bằng thuộc tính: modal-dialog-centered

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Hiển thị modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">sonnguyenaz.com</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Chào mừng bạn đến với website sonnguyenaz.com!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

Ở hộp thoại hiện lên của modal này cũng có thể gọi được hộp thoại của modal kia:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
	  <div class="modal-dialog">
		<div class="modal-content">
		  <div class="modal-header">
			<h1 class="modal-title fs-5" id="exampleModalToggleLabel">Modal 1</h1>
			<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		  </div>
		  <div class="modal-body">
			Nội dung Modal thứ nhất
		  </div>
		  <div class="modal-footer">
			<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Mở modal 2</button>
		  </div>
		</div>
	  </div>
	</div>
	<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
	  <div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
		  <div class="modal-header">
			<h1 class="modal-title fs-5" id="exampleModalToggleLabel2">Modal 2</h1>
			<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		  </div>
		  <div class="modal-body">
			Nội dung Modal thứ hai
		  </div>
		  <div class="modal-footer">
			<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Quay lại Modal 1</button>
		  </div>
		</div>
	  </div>
	</div>
	<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Mở modal 1</button>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

Lời kết

Như vậy chúng ta đã cùng tìm hiểu về Modal trong Bootstrap hi vọng bài hướng dẫn này sẽ giúp các bạn ứng dụng thực tế vào trang web của mình.

Bài viết cùng chủ đề:

Cảm ơn các bạn đã theo dõi.

Rate this post

sonnguyen

Là một nhân viên IT thích chia sẻ những gì mình biết đến tất cả mọi người. Hi vọng được mọi người ủng hộ, nếu có gì sai sót mong các bạn comment xuống dưới để mình khắc phục. Cảm ơn mọi người!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *