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.

Trên trang này

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:

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-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-bs-toggle="modal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </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>

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-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </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">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ì.

Bạn cũng có thể tạo một phương thức có thể cuộn cho phép cuộn nội dung phương thức bằng cách thêm .modal-dialog-scrollablevào .modal-dialog.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Căn giữa theo chiều dọc

Thêm vào .modal-dialog-centeredgiữa .modal-dialogphương thức theo chiều dọc.

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</div>

Chú giải công cụ và cửa sổ bật lên

Chú giải công cụ và cửa sổ bật lên có thể được đặt trong các phương thức nếu cần. Khi các phương thức bị đóng, mọi chú giải công cụ và cửa sổ bật lên bên trong cũng tự động bị loại bỏ.

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

Sử dụng lưới

Sử dụng hệ thống lưới Bootstrap trong một phương thức bằng cách lồng .container-fluidvào .modal-body. Sau đó, sử dụng các lớp hệ thống lưới bình thường như bạn làm ở bất kỳ nơi nào khác.

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Có một loạt các nút đều kích hoạt cùng một phương thức với nội dung hơi khác nhau? Sử dụng event.relatedTargetvà các thuộc tính HTMLdata-bs-* để thay đổi nội dung của phương thức tùy thuộc vào nút nào được nhấp.

Dưới đây là bản trình diễn trực tiếp, tiếp theo là HTML và JavaScript mẫu. Để biết thêm thông tin, hãy đọc tài liệu về sự kiện phương thức để biết thêm chi tiết relatedTarget.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<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">New message</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </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">Send message</button>
      </div>
    </div>
  </div>
</div>

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

Chuyển đổi giữa các phương thức

Chuyển đổi giữa nhiều phương thức với một số vị trí thông minh của thuộc tính data-bs-targetvà data-bs-toggle. Ví dụ: bạn có thể chuyển đổi phương thức đặt lại mật khẩu từ bên trong phương thức đăng nhập đã mở sẵn. Xin lưu ý rằng không thể mở nhiều phương thức cùng một lúc — phương pháp này chỉ đơn giản là chuyển đổi giữa hai phương thức riêng biệt.

Mở phương thức đầu tiên

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</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">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

Thay đổi hoạt ảnh

Biến $modal-fade-transformxác định trạng thái chuyển đổi ở .modal-dialogtrước hoạt ảnh mờ dần theo phương thức, $modal-show-transformbiến xác định chuyển đổi .modal-dialogở cuối hoạt ảnh mờ dần theo phương thức.

Nếu bạn muốn một hoạt ảnh phóng to, chẳng hạn, bạn có thể đặt $modal-fade-transform: scale(.8).

Xóa hoạt ảnh

Đối với các phương thức chỉ xuất hiện thay vì mờ dần để xem, hãy xóa .fadelớp khỏi đánh dấu phương thức của bạn.

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

Độ cao động

Nếu chiều cao của một phương thức thay đổi khi nó đang mở, bạn nên gọi myModal.handleUpdate()để điều chỉnh lại vị trí của phương thức trong trường hợp một thanh cuộn xuất hiện.

Khả năng tiếp cận

Đảm bảo thêm aria-labelledby="...", tham chiếu đến tiêu đề phương thức, đến .modal. Ngoài ra, bạn có thể đưa ra mô tả về hộp thoại phương thức của mình với aria-describedbybật .modal. Lưu ý rằng bạn không cần thêm role="dialog"vì chúng tôi đã thêm nó qua JavaScript.

Nhúng video YouTube

Nhúng video YouTube trong các phương thức yêu cầu JavaScript bổ sung không có trong Bootstrap để tự động dừng phát lại và hơn thế nữa. Xem bài đăng Stack Overflow hữu ích này để biết thêm thông tin.

Kích thước tùy chọn

Phương thức có ba kích thước tùy chọn, có sẵn thông qua các lớp bổ trợ để được đặt trên a .modal-dialog. Các kích thước này xuất hiện tại một số điểm ngắt nhất định để tránh thanh cuộn ngang trên các cửa sổ xem hẹp hơn.

Kích thước	Lớp	Chiều rộng tối đa theo phương thức
Nhỏ bé	`.modal-sm`	`300px`
Mặc định	Không có	`500px`
Lớn	`.modal-lg`	`800px`
Cực lớn	`.modal-xl`	`1140px`

Phương thức mặc định của chúng tôi không có lớp bổ trợ tạo thành phương thức kích thước "trung bình".

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

Ghi đè khác là tùy chọn bật lên một phương thức bao phủ chế độ xem của người dùng, có sẵn thông qua các lớp bổ trợ được đặt trên a .modal-dialog.

Lớp	khả dụng
`.modal-fullscreen`	Luôn luôn
`.modal-fullscreen-sm-down`	Phía dưới`576px`
`.modal-fullscreen-md-down`	Phía dưới`768px`
`.modal-fullscreen-lg-down`	Phía dưới`992px`
`.modal-fullscreen-xl-down`	Phía dưới`1200px`
`.modal-fullscreen-xxl-down`	Phía dưới`1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

Sass

Biến

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        rgba($black, .2);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

Vòng

Chế độ toàn màn hình đáp ứng được tạo thông qua $breakpointsbản đồ và một vòng lặp scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

Cách sử dụng

Plugin phương thức chuyển đổi nội dung ẩn của bạn theo yêu cầu, thông qua các thuộc tính dữ liệu hoặc JavaScript. Nó cũng ghi đè hành vi cuộn mặc định và tạo ra một .modal-backdropvùng nhấp chuột để loại bỏ các phương thức được hiển thị khi nhấp vào bên ngoài phương thức.

Qua các thuộc tính dữ liệu

Kích hoạt một phương thức mà không cần viết JavaScript. Đặt data-bs-toggle="modal"trên một phần tử bộ điều khiển, như một nút, cùng với data-bs-target="#foo"hoặc href="#foo"để nhắm mục tiêu một phương thức cụ thể để chuyển đổi.

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

Qua JavaScript

Tạo một phương thức với một dòng JavaScript:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Tùy chọn

Các tùy chọn có thể được chuyển 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 nối tên tùy chọn vào data-bs-, như trong data-bs-backdrop="".

Tên	Loại hình	Mặc định	Sự mô tả
`backdrop`	boolean hoặc chuỗi`'static'`	`true`	Bao gồm một yếu tố phương thức-phông nền. Ngoài ra, chỉ định `static`phông nền không đóng phương thức khi nhấp chuột.
`keyboard`	boolean	`true`	Đóng phương thức khi nhấn phím thoát
`focus`	boolean	`true`	Đặt tiêu điểm vào phương thức khi khởi tạo.

Phương pháp

Các phương thức và chuyển tiếp không đồng bộ

Tất cả các phương thức API là không đồng bộ và bắt đầu quá trình chuyển đổi . Họ quay lại người gọi ngay sau khi quá trình chuyển đổi được bắt đầu nhưng trước khi quá trình chuyển đổi kết thúc . Ngoài ra, một lệnh gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua .

Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin .

Các tùy chọn vượt qua

Kích hoạt nội dung của bạn như một phương thức. Chấp nhận một tùy chọn tùy chọn object.

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

chuyển đổi

Chuyển đổi một phương thức theo cách thủ công. Trả về cho người gọi trước khi phương thức thực sự được hiển thị hoặc ẩn (tức là trước khi sự kiện shown.bs.modalhoặc hidden.bs.modalsự kiện xảy ra).

myModal.toggle()

buổi bieu diễn

Mở một phương thức theo cách thủ công. Trả về người gọi trước khi phương thức thực sự được hiển thị (tức là trước khi shown.bs.modalsự kiện xảy ra).

myModal.show()

Ngoài ra, bạn có thể chuyển một phần tử DOM làm đối số có thể được nhận trong các sự kiện phương thức (dưới dạng thuộc relatedTargettính).

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

ẩn giấu

Ẩn một phương thức theo cách thủ công. Trả về người gọi trước khi phương thức thực sự bị ẩn (tức là trước khi hidden.bs.modalsự kiện xảy ra).

myModal.hide()

xử lý

Điều chỉnh lại vị trí của phương thức theo cách thủ công nếu chiều cao của phương thức thay đổi khi nó đang mở (tức là trong trường hợp thanh cuộn xuất hiện).

myModal.handleUpdate()

vứt bỏ

Destroys an element’s modal. (Removes stored data on the DOM element)

myModal.dispose()

getInstance

Static method which allows you to get the modal instance associated with a DOM element

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

getOrCreateInstance

Static method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn’t initialised

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

Events

Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">).

Event type	Description
`show.bs.modal`	This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event.
`shown.bs.modal`	Sự kiện này được kích hoạt khi phương thức đã được hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất). Nếu do một lần nhấp gây ra, phần tử được nhấp sẽ có sẵn dưới dạng thuộc `relatedTarget`tính của sự kiện.
`hide.bs.modal`	Sự kiện này được kích hoạt ngay lập tức khi `hide`phương thức thể hiện đã được gọi.
`hidden.bs.modal`	Sự kiện này được kích hoạt khi phương thức hoàn tất bị ẩn khỏi người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất).
`hidePrevented.bs.modal`	Sự kiện này được kích hoạt khi phương thức được hiển thị, phông nền của nó `static`và một cú nhấp chuột bên ngoài phương thức hoặc nhấn phím thoát được thực hiện với tùy chọn bàn phím hoặc `data-bs-keyboard`được đặt thành `false`.

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})