Hướng dẫn tạo modal trong Twitter Bootstrap

Trong bài viết này chúng ta sẽ tìm hiểu cách tạo một popup modal đơn giản sử dụng HTML framework nổi tiếng là Twtitter Bootstrap. Nếu bạn chưa từng nghe về cái tên Twitter Bootstrap thì tôi khuyên bạn nên tham khảo khoá học Twitter Bootstrap cơ bản trước khi tham khảo nội dung chi tiết của bài viết này.

Modal Là Gì

Một modal là một hộp thoại thông báo (popup) giống như hộp thoại cảnh báo alert popup khi bạn gọi hàm alert() hay hàm prompt() sử dụng JavaScript. Tuy nhiên khác với alert popup thì khi sử dụng modal lập trình viên có thể tuỳ biến nội dung hiển thị trong hộp thoại.

Modal trong Twitter Bootstrap

Tạo Trang Twitter Bootstrap

Để modal hoạt động được thì ngoài việc sử dụng CSS và font của Bootstrap chúng ta cần sử dụng cả thư viện JavaScript của framework này. Chúng ta sẽ sử dụng một cấu trúc HTML cơ bản của Twitter Bootstrap để hoàn thành bài học này như ví dụ sau:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Hướng dẫn tạo Bootstrap Modal - CodeHub.vn</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Lưu ý trong đoạn code tham chiếu tới các tập tin css/bootstrap.css, js/bootstrap.min.js... ở local do đó bạn cần phải tải về Twitter Bootstrap về máy để khi chạy trang không gặp phải lỗi.

Các đoạn code tiếp theo đây sẽ đươcj đưa vào bên trong phần tử body của trang.

Tạo Button Hiển Thị Modal

Một modal trong Twitter Bootstrap có thể được hiển thị theo nhiều cách khác nhau. Cách đơn giản nhất là sử dụng một nút bấm button với cấu trúc HTMLnhư sau:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Mở Modal
</button>

Ở đoạn HTML trên bạn cần lưu ý thuộc tính data-target="#myModal" của phần tử button. Thuộc tính này sẽ quy định khi người dùng nhấp vào button này thì phần tử HTML có giá trị thuộc tính id="myModal" sẽ được hiển thị trên trang dưới dạng modal popup.

Tạo button để bật Modal Twitter Bootstrap

Phần tử HTML của modal như vậy chưa có và ở những phần tiếp theo đây chúng ta sẽ cần thêm đoạn code HTML để cho modal này.

Cấu Trúc Nội Dung Của Modal

Một modal gồm có 3 phần chính:

  • Modal header: Phần này thường dùng để chứa tiêu đề của modal và nút biểu tượng đóng hộp thoại modal.
  • Modal body: Phần này thường dùng để chứa nội dung chính của modal.
  • Modal footer: Phần này thường được dùng để chứa các nút hành động (action bottom) như đóng modal hoặc một hành động khác.

Bạn có thể tham khảo ảnh phía trên để hiểu được cấu trúc gồm 3 thành phần trên của một modal.

Cấu Trúc HTML Của Modal

Cấu trúc HTML của modal cũng tương tự như cấu trúc phần nội dung của modal và gồm 3 phần như bạn thấy trong đoạn code phía dưới đây:

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Tiêu Đề Modal</h4>
      </div>

      <div class="modal-body">
      Nội dung chính của modal...
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Đóng</button>
        <button type="button" class="btn btn-primary">Lưu Lại</button>
      </div>

Ở trên bạn có thể thấy trong phần header của modal chúng ta sử dụng một HTML entity là &times;. Khi hiển thị trang trên trình duyệt thì entity này sẽ có hình dạng tương tự chữ x. Bạn có thể sử dụng bất cứ biển tượng nào khác để thay thế cho entity này.

Bạn cũng có thể thay đổi hoặc thêm vào các nội dung cho tiêu đề của modal, phần body của modal hoặc văn bản hiển thị cho hai button trong phần footer.

Ngoài ra chúng ta cũng cần bọc đoạn HTML trên cần bên trong cấu trúc sau:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        ...
    </div>
  </div>
</div>

Kiểm Tra Lại

Bây giờ nếu bạn mở trang HTML trên trình duyệt và sau đó bấm vào nút button nền xạnh đậm bạn sẽ thấy một cửa sổ thông báo hiển thị.

Twitter Bootstrap JavaScript CSS HTML Frontend
Thêm Bình Luận: