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:

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

myModal.addEventListener('shown.bs.modal', () => {
  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 dưới đây để 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" data-bs-toggle="popover" 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="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" 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.

html

<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>

const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
  // Button that triggered the modal
  const button = event.relatedTarget
  // Extract info from data-bs-* attributes
  const 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.
  const modalTitle = exampleModal.querySelector('.modal-title')
  const 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ở. 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

html

<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">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">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 ví dụ như một hoạt ảnh phóng to, 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 kích hoạt 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>

Một 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`	`576px`
`.modal-fullscreen-md-down`	`768px`
`.modal-fullscreen-lg-down`	`992px`
`.modal-fullscreen-xl-down`	`1200px`
`.modal-fullscreen-xxl-down`	`1400px`

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

CSS

Biến

Đã thêm vào v5.2.0

Là một phần của phương pháp tiếp cận các biến CSS đang phát triển của Bootstrap, các phương thức hiện sử dụng các biến CSS cục bộ trên .modalvà .modal-backdropđể tùy chỉnh thời gian thực nâng cao. Giá trị cho các biến CSS được đặt thông qua Sass, do đó, tùy chỉnh Sass cũng vẫn được hỗ trợ.

  --#{$prefix}modal-zindex: #{$zindex-modal};
  --#{$prefix}modal-width: #{$modal-md};
  --#{$prefix}modal-padding: #{$modal-inner-padding};
  --#{$prefix}modal-margin: #{$modal-dialog-margin};
  --#{$prefix}modal-color: #{$modal-content-color};
  --#{$prefix}modal-bg: #{$modal-content-bg};
  --#{$prefix}modal-border-color: #{$modal-content-border-color};
  --#{$prefix}modal-border-width: #{$modal-content-border-width};
  --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
  --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
  --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
  --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
  --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
  --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
  --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
  --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
  --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
  --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
  --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};

  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

Biến Sass

$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:        var(--#{$prefix}border-color-translucent);
$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:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-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-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

$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

Các 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,
      .modal-footer {
        @include border-radius(0);
      }

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

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

Chuyển đổi

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>

Bỏ qua

Loại bỏ có thể đạt được với datathuộc tính trên một nút trong phương thức như được minh họa bên dưới:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

hoặc trên một nút bên ngoài phương thức bằng cách sử dụng data-bs-targetnhư được minh họa bên dưới:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>

Mặc dù cả hai cách để loại bỏ một phương thức đều được hỗ trợ, hãy nhớ rằng việc loại bỏ từ bên ngoài một phương thức không phù hợp với mẫu hộp thoại Hướng dẫn Thực hành Tác giả ARIA (phương thức) . Làm điều này có nguy cơ đến bạn.

Qua JavaScript

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

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

Tùy chọn

Vì các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript, bạn có thể thêm tên tùy chọn vào data-bs-, như trong data-bs-animation="{value}". Đảm bảo thay đổi kiểu chữ hoa của tên tùy chọn từ “ camelCase ” thành “ kebab-case ” khi chuyển các tùy chọn qua thuộc tính dữ liệu. Ví dụ, sử dụng data-bs-custom-class="beautifier"thay vì data-bs-customClass="beautifier".

Kể từ Bootstrap 5.2.0, tất cả các thành phần đều hỗ trợ thuộc tính dữ liệu dành riêng thử nghiệmdata-bs-config có thể chứa cấu hình thành phần đơn giản dưới dạng chuỗi JSON. Khi một phần tử có data-bs-config='{"delay":0, "title":123}'và data-bs-title="456"các thuộc tính, titlegiá trị cuối cùng sẽ là 456và các thuộc tính dữ liệu riêng biệt sẽ ghi đè các giá trị được cho trên data-bs-config. Ngoài ra, các thuộc tính dữ liệu hiện có có thể chứa các giá trị JSON như data-bs-delay='{"show":0,"hide":150}'.

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

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 . Chúng trở 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.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})

Phương pháp	Sự mô tả
`dispose`	Phá hủy phương thức của một phần tử. (Xóa dữ liệu được lưu trữ trên phần tử DOM)
`getInstance`	Phương thức tĩnh cho phép bạn lấy thể hiện phương thức được liên kết với một phần tử DOM.
`getOrCreateInstance`	Phương thức tĩnh cho phép bạn lấy thể hiện phương thức được liên kết với một phần tử DOM hoặc tạo một thể hiện mới trong trường hợp nó chưa được khởi tạo.
`handleUpdate`	Đ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).
`hide`	Ẩ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.modal`sự kiện xảy ra).
`show`	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.modal`sự kiện xảy ra). 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 `relatedTarget`tính). (tức là `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`.
`toggle`	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 bị ẩn (tức là trước khi sự kiện `shown.bs.modal`hoặc `hidden.bs.modal`sự kiện xảy ra).

Sự kiện

Lớp phương thức của Bootstrap cho thấy một vài sự kiện để kết nối vào chức năng phương thức. Tất cả các sự kiện của phương thức được kích hoạt tại chính phương thức (tức là tại <div class="modal">).

Biến cố	Sự mô tả
`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 được thực hiện. Sự kiện cũng được kích hoạt khi nhấn phím thoát và `keyboard`tùy chọn được đặt thành `false`.
`show.bs.modal`	Sự kiện này kích hoạt ngay lập tức khi `show`phương thức thể hiện được gọi. 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.
`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.

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