in English

Phương thức

Sử dụng plugin phương thức JavaScript của Bootstrap để thêm hộp thoại vào trang web của bạn cho hộp đèn, thông báo của người dùng hoặc nội dung hoàn toàn tùy chỉnh.

Làm thế nào nó hoạt động

Trước khi bắt đầu với thành phần phương thức của Bootstrap, hãy nhớ đọc phần sau vì các tùy chọn menu của chúng tôi gần đây đã thay đổi.

Các chế độ được xây dựng bằng HTML, CSS và JavaScript. Chúng được định vị trên mọi thứ khác trong tài liệu và loại bỏ cuộn khỏi <body>để nội dung phương thức cuộn thay thế.
Nhấp vào "phông nền" của phương thức sẽ tự động đóng phương thức.
Bootstrap chỉ hỗ trợ một cửa sổ phương thức tại một thời điểm. Các phương thức lồng nhau không được hỗ trợ vì chúng tôi cho rằng chúng mang lại trải nghiệm người dùng kém.
Việc sử dụng các phương thức position: fixed, đôi khi có thể hơi đặc biệt về kết xuất của nó. Bất cứ khi nào có thể, hãy đặt HTML phương thức của bạn ở vị trí cấp cao nhất để tránh sự can thiệp tiềm ẩn từ các phần tử khác. Bạn có thể sẽ gặp sự cố khi lồng một .modalphần tử cố định khác vào.
Một lần nữa, do position: fixedđó, có một số lưu ý khi sử dụng các phương thức trên thiết bị di động. Xem tài liệu hỗ trợ trình duyệt của chúng tôi để biết chi tiết.
Do cách HTML5 xác định ngữ nghĩa của nó, thuộc tính autofocusHTML không có tác dụng trong các phương thức Bootstrap. Để đạt được hiệu quả tương tự, hãy sử dụng một số JavaScript tùy chỉnh:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Hiệu ứng hoạt ảnh của thành phần này phụ thuộc vào prefers-reduced-motiontruy vấn phương tiện. Xem phần chuyển động giảm trong tài liệu hỗ trợ tiếp cận của chúng tôi .

Hãy tiếp tục đọc các bản trình diễn và hướng dẫn sử dụng.

Các ví dụ

Dưới đây là một ví dụ về phương thức tĩnh (nghĩa là của nó positionvà displayđã được ghi đè). Bao gồm tiêu đề phương thức, nội dung phương thức (bắt buộc đối với padding) và chân trang phương thức (tùy chọn). Chúng tôi yêu cầu bạn bao gồm tiêu đề phương thức với các hành động loại bỏ bất cứ khi nào có thể hoặc cung cấp một hành động loại bỏ rõ ràng khác.

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Bản thử trực tiếp

Chuyển đổi bản trình diễn phương thức hoạt động bằng cách nhấp vào nút bên dưới. Nó sẽ trượt xuống và mờ dần từ đầu trang.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo 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">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Phông nền tĩnh

Khi phông nền được đặt thành tĩnh, phương thức sẽ không đóng khi nhấp vào bên ngoài phông nền. Nhấp vào nút bên dưới để thử nó.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

Cuộn nội dung dài

Khi các phương thức trở nên quá dài đối với khung nhìn hoặc thiết bị của người dùng, chúng sẽ cuộn độc lập với chính trang đó. Hãy thử demo bên dưới để xem chúng tôi muốn nói gì.