Bootstrap: Modals modal.js

Các khóa học qua video:

Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript

Học trên YouTube <76K/tháng. Đăng ký Hội viên

Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Các ví dụ

Modal là một hộp thoại đơn giản nhưng rất linh hoạt với rất ít tính năng được yêu cầu cùng với các thiết lập thông minh.

Không hỗ trợ các hộp thoại xếp chồng lên nhau

Hãy lưu ý rằng, không nên mở một modal trong khi một modal khác vẫn đang hiển thị. Nếu bạn muốn hiển thị nhiều modal cùng một lúc, bạn sẽ phải chỉnh sửa code.

Một số vấn đề đối với thiết bị di động

Có một số vấn đề liên quan đến việc sử dụng modal trên các thiết bị di động. Hãy tham khảo tài liệu về tính hỗ trợ các trình duyệt để biết thêm chi tiết.

Ví dụ tĩnh

Một modal đã được tạo ra với phần tiêu đề, phần nội dung và một tập hợp các hành động nằm trong phần cuối.

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Demo trực tiếp

Kích hoạt một modal thông qua JavaScript bằng cách nhấn vào nút bên dưới. Modal sẽ trượt xuống từ phía trên của trang và dần dần hiển thị lên

Launch demo modal

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Truy nhập modal

Hãy thêm role="dialog" vào .modal, thuộc tính aria-labelledby="myModalLabel" dùng để tham chiếu đến phần tiêu đề của modal, và aria-hidden="true" để các công nghệ hỗ trợ bỏ qua các phần tử DOM của modal.

Thêm vào đó, bạn cũng có thể thêm phần mô tả cho modal của bạn thông qua thuộc tính aria-describedby trên .modal.

Nhúng video YouTube

Việc nhúng các video trên YouTube vào modal đòi hỏi phải thêm JavaScript để tùy chỉnh video. Hãy tham khảo một bài viết trên Stack Overflow để biết thêm chi tiết.

Các kích thước tùy chọn

Các modal có hai kích thước tùy chọn được định nghĩa bằng các class được đặt cùng với .modal-dialog.

Large modal Small modal

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Xóa bỏ hiệu ứng động

Nếu bạn muốn các modal hiển thị một cách đơn giản thay vì có các hiệu ứng như fade, hãy xóa bỏ class .fade khỏi markup modal của bạn.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  ...
</div>

Cách sử dụng

Plugin modal hiển thị nội dung ẩn của bạn khi được gọi, thông qua các thuộc tính dữ liệu hoặc JavaScript. Nó cũng thêm .modal-openvào <body> để ghi đè hành vi của scroll mặc định và sinh ra một .modal-backdrop, một vùng mà khi bạn nhấn vào đó (bên ngoài modal) sẽ làm ẩn modal đó đi.

Thông qua các thuộc tính dữ liệu

Bạn có thể kích hoạt một modal mà không cần phải viết một đoạn mã JavaScript nào cả. Chỉ cần thiết lập data-toggle="modal" trên phần tử điều khiển, ví dụ như một nút, cùng với data-target="#foo" hoặc href="#foo" để hướng mục tiêu đến một modal cụ thể.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Thông qua JavaScript

Gọi một modal với id myModal bằng chỉ một dòng JavaScript duy nhất:

$('#myModal').modal(options)

Các tùy chọn

Các tùy chọn có thể được truyền thông qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy thêm tên của tùy chọn đó vào sau data-, tương tự như data-backdrop="".

Tên	Loại	Mặc định	Mô tả
backdrop	boolean or the string`'static'`	true	Thêm phần tử modal-backdrop. Ngoài ra, thiết lập `static` cho một backdrop để không đóng modal khi click vào backdrop đó.
keyboard	boolean	true	Đóng modal khi nhấn phím "Escape"
show	boolean	true	Hiển thị modal khi đã được khởi tạo.
remote	path	false	Nếu một đường dẫn được cung cấp, nội dung sẽ được tải duy nhất một lần thông qua phương thức `load` của jQuery và tích hợp vào `.modal-content`. nếu bạn đang sử dụng data-api, bạn có thể sử dụng thuộc tính `href` để chỉ rõ nguồn điều khiển từ xa. Ví dụ: `<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>`

Các phương thức

.modal(options)

Phương thức này có tác dụng hiển thi nội dung của bạn giống như một modal, nó nhận object đầu vào như là các tùy chọn.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

Mở modal bằng tay. Trả về cho caller trước khi modal thực sự được hiển thị hoặc ẩn đi (Ví dụ :Trước khi sự kiệnshown.bs.modal hoặc hidden.bs.modal xảy ra).

$('#myModal').modal('toggle')

.modal('show')

Mở modal bằng tay. Trả về cho caller trước khi modal thực sự được hiển thị (Ví dụ: Trước khi sự kiện shown.bs.modal xảy ra).

$('#myModal').modal('show')

.modal('hide')

Đóng modal bằng tay. Trả về cho caller trước khi modal thực sự ẩn đị (Ví dụ: Trước khi sự kiện hidden.bs.modal xảy ra).

$('#myModal').modal('hide')

Các sự kiện

Các class modal của Bootstrap hỗ trợ một số sự kiện cho việc kích hoạt các tính năng của modal.

Loại sự kiện	Mô tả
show.bs.modal	Sự kiện xảy ra ngay khi phương thức `show` được gọi. Nếu được kích hoạt bằng click thì phần tử được click sẽ giống như thuộc tính `relatedTarget` của sự kiện.
shown.bs.modal	Sự kiện này xảy ra ngay khi modal hiển thị (đang chờ CSS transition kết thúc). Nếu được kích hoạt bằng click thì phần tử được click sẽ giống như thuộc tính `relatedTarget` của sự kiện.
hide.bs.modal	Sự kiện này xảy ra ngay khi phương thức `hide` được gọi.
hidden.bs.modal	Sự kiện này xảy ra ngay khi modal ẩn đi hoàn toàn (đang chờ CSS transition kết thúc).
loaded.bs.modal	Sự kiện này xảy ra khi modal được tải nội dung bằng tùy chọn từ xa.

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

» Tiếp: Menu sổ xuống dropdown.js

« Trước: Hiệu ứng dịch chuyển transition.js