Преминете към основното съдържание Преминете към навигацията с документи
Check
in English

Модален

Използвайте JavaScript модалния плъгин на Bootstrap, за да добавите диалогови прозорци към вашия сайт за лайтбоксове, потребителски известия или напълно персонализирано съдържание.

На тази страница

Как работи

Преди да започнете с модалния компонент на Bootstrap, не забравяйте да прочетете следното, тъй като нашите опции в менюто наскоро бяха променени.

  • Модалните са изградени с HTML, CSS и JavaScript. Те са разположени над всичко останало в документа и премахват превъртането от, <body>така че модалното съдържание да се превърта вместо това.
  • Щракването върху модалния „фон“ автоматично ще затвори модала.
  • Bootstrap поддържа само един модален прозорец наведнъж. Вложените модали не се поддържат, тъй като смятаме, че създават лошо потребителско изживяване.
  • Модалните използват position: fixed, което понякога може да бъде малко специфично за изобразяването му. Когато е възможно, поставете своя модален HTML на позиция от най-високо ниво, за да избегнете потенциална намеса от други елементи. Вероятно ще срещнете проблеми, когато влагате a .modalв друг фиксиран елемент.
  • Още веднъж, поради position: fixed, има някои предупреждения при използването на модали на мобилни устройства. Вижте нашите документи за поддръжка на браузъра за подробности.
  • Поради начина, по който HTML5 дефинира семантиката си, атрибутът autofocusHTML няма ефект в модалите на Bootstrap. За да постигнете същия ефект, използвайте персонализиран JavaScript:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
Анимационният ефект на този компонент зависи от prefers-reduced-motionмедийната заявка. Вижте раздела за намалено движение в нашата документация за достъпност .

Продължете да четете за демонстрации и указания за употреба.

Примери

По-долу е статичен модален пример (което означава, че positionи displayса били заменени). Включени са модалната заглавка, модалното тяло (задължително за padding) и модалния долен колонтитул (по избор). Молим ви да включите модални заглавки с действия за отхвърляне, когато е възможно, или да предоставите друго изрично действие за отхвърляне.

Модално заглавие

Тук влиза модалният основен текст.

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

Демо на живо

Превключете работеща модална демонстрация, като щракнете върху бутона по-долу. Той ще се плъзне надолу и ще изчезне от горната част на страницата.

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

Статичен фон

Когато фонът е настроен на статичен, модалът няма да се затвори при щракване извън него. Щракнете върху бутона по-долу, за да опитате.

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

Превъртане на дълго съдържание

Когато модалите станат твърде дълги за прозореца или устройството на потребителя, те се превъртат независимо от самата страница. Опитайте демонстрацията по-долу, за да видите какво имаме предвид.

Можете също така да създадете превъртащ модал, който позволява превъртане на модалното тяло, като добавите .modal-dialog-scrollableкъм .modal-dialog.

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

Вертикално центрирано

Добавете .modal-dialog-centeredкъм .modal-dialog, за да центрирате вертикално модала.

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

Подсказки и изскачащи съобщения

Подсказки и изскачащи елементи могат да бъдат поставени в модали, ако е необходимо . Когато модалите са затворени, всички подсказки и изскачащи съобщения в тях също се отхвърлят автоматично.

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

Използване на решетката

Използвайте мрежовата система Bootstrap в рамките на модал чрез влагане .container-fluidв .modal-body. След това използвайте нормалните класове на мрежовата система, както бихте направили навсякъде другаде.

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

Различно модално съдържание

Имате куп бутони, които задействат един и същ модал с малко различно съдържание? Използвайте event.relatedTargetи HTML data-bs-*атрибути, за да променяте съдържанието на модала в зависимост от това кой бутон е щракнат.

По-долу има демонстрация на живо, последвана от примерен HTML и JavaScript. За повече информация прочетете документите за модални събития за подробности относно 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
})

Превключване между модали

Превключвайте между множество модали с интелигентно разположение на атрибутите data-bs-targetи . data-bs-toggleНапример, можете да превключите модал за нулиране на парола от вече отворен модал за влизане. Моля, обърнете внимание, че няколко модала не могат да бъдат отворени едновременно — този метод просто превключва между два отделни модала.

Отворете първия модал
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>

Промяна на анимацията

Променливата $modal-fade-transformопределя състоянието на трансформация на .modal-dialogпреди модалната плавна анимация, $modal-show-transformпроменливата определя трансформацията на .modal-dialogв края на модалната плавна анимация.

Ако искате например анимация за увеличаване, можете да зададете $modal-fade-transform: scale(.8).

Премахване на анимация

За модали, които просто се появяват, вместо да избледняват за преглед, премахнете .fadeкласа от вашето модално маркиране.

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

Динамични височини

Ако височината на модала се промени, докато е отворен, трябва да извикате, myModal.handleUpdate()за да коригирате отново позицията на модала, в случай че се появи лента за превъртане.

Достъпност

Не забравяйте да добавите aria-labelledby="...", като се позовавате на модалното заглавие, към .modal. Освен това можете да дадете описание на вашия модален диалог с aria-describedbyon .modal. Имайте предвид, че не е необходимо да добавяте role="dialog", тъй като вече го добавяме чрез JavaScript.

Вграждане на видеоклипове в YouTube

Вграждането на видеоклипове в YouTube в модални изисква допълнителен JavaScript, който не е в Bootstrap, за автоматично спиране на възпроизвеждането и др. Вижте тази полезна публикация на Stack Overflow за повече информация.

Размери по избор

Модалите имат три незадължителни размера, достъпни чрез модификаторни класове, които да бъдат поставени в .modal-dialog. Тези размери се включват в определени точки на прекъсване, за да се избегнат хоризонтални ленти за превъртане на по-тесни прозорци.

Размер Клас Модална максимална ширина
малък .modal-sm 300px
По подразбиране Нито един 500px
Голям .modal-lg 800px
Много голям .modal-xl 1140px

Нашият модал по подразбиране без клас модификатор съставлява модала „среден“ размер.

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

Модален на цял екран

Друга отмяна е опцията за изскачане на модал, който покрива прозореца за изглед на потребителя, достъпен чрез модификаторни класове, които са поставени на .modal-dialog.

Клас Наличност
.modal-fullscreen Винаги
.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

Променливи

Добавен във v5.2.0

Като част от развиващия се подход на Bootstrap към CSS променливите, модалните вече използват локални CSS променливи на .modalи .modal-backdropза подобрено персонализиране в реално време. Стойностите за CSS променливите се задават чрез Sass, така че персонализирането на Sass все още се поддържа.

  --#{$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};

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

Цикъл

Отзивчивите модали на цял екран се генерират чрез $breakpointsкартата и цикъл в 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;
      }
    }
  }
}

Използване

Модалният плъгин превключва вашето скрито съдържание при поискване, чрез атрибути на данни или JavaScript. Той също така отменя поведението на превъртане по подразбиране и генерира , за .modal-backdropда предостави зона за щракване за отхвърляне на показаните модали, когато щраквате извън модала.

Чрез атрибути на данни

Превключване

Активирайте модал, без да пишете JavaScript. Задайте data-bs-toggle="modal"елемент на контролер, като бутон, заедно с data-bs-target="#foo"или href="#foo"за насочване към конкретен модал за превключване.

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

Отхвърляне

Отхвърлянето може да се постигне с dataатрибута на бутон в модала , както е показано по-долу:

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

или върху бутон извън модала , като използвате data-bs-targetкакто е показано по-долу:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Въпреки че се поддържат и двата начина за отхвърляне на модал, имайте предвид, че отхвърлянето извън модал не съответства на диалоговия (модален) модел на ръководството за авторски практики на ARIA . Правете това на свой собствен риск.

Чрез JavaScript

Създайте модал с един ред JavaScript:

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

Настроики

Тъй като опциите могат да се предават чрез атрибути на данни или JavaScript, можете да добавите име на опция към data-bs-, както в data-bs-animation="{value}". Уверете се, че сте променили типа регистър на името на опцията от „ camelCase ” на „ kebab-case ”, когато предавате опциите чрез атрибути на данни. Например използвайте data-bs-custom-class="beautifier"вместо data-bs-customClass="beautifier".

От Bootstrap 5.2.0 всички компоненти поддържат експериментален резервиран атрибут на данни, data-bs-configкойто може да съдържа проста конфигурация на компонент като JSON низ. Когато даден елемент има атрибути data-bs-config='{"delay":0, "title":123}'и data-bs-title="456", крайната titleстойност ще бъде 456и отделните атрибути на данни ще заменят стойностите, дадени на data-bs-config. В допълнение, съществуващите атрибути на данни могат да съдържат JSON стойности като data-bs-delay='{"show":0,"hide":150}'.

Име Тип По подразбиране Описание
backdrop булево,'static' true Включва елемент на модален фон. Като алтернатива, посочете staticза фон, който не затваря модала при щракване.
focus булево true Поставя фокуса върху модала, когато се инициализира.
keyboard булево true Затваря модала, когато се натисне клавиш за изход.

Методи

Асинхронни методи и преходи

Всички API методи са асинхронни и стартират преход . Те се връщат при повикващия веднага щом преходът започне, но преди да приключи . В допълнение, извикване на метод на преходен компонент ще бъде игнорирано .

Вижте нашата JavaScript документация за повече информация .

Опции за преминаване

Активира вашето съдържание като модално. Приема опции по избор object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Метод Описание
dispose Унищожава модала на елемент. (Премахва съхранените данни в DOM елемента)
getInstance Статичен метод, който ви позволява да получите модалния екземпляр, свързан с DOM елемент.
getOrCreateInstance Статичен метод, който ви позволява да получите модалния екземпляр, свързан с DOM елемент, или да създадете нов, в случай че не е инициализиран.
handleUpdate Ръчно регулирайте отново позицията на модала, ако височината на модала се промени, докато е отворен (т.е. в случай, че се появи лента за превъртане).
hide Ръчно скрива модал. Връща се към повикващия, преди модалът действително да е бил скрит (т.е. преди да hidden.bs.modalсе случи събитието).
show Ръчно отваря модал. Връща се към повикващия, преди модалът действително да бъде показан (т.е. преди shown.bs.modalсъбитието да се случи). Освен това можете да подадете DOM елемент като аргумент, който може да бъде получен в модалните събития (като relatedTargetсвойството). const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)( т.е.
toggle Ръчно превключва модал. Връща се към повикващия, преди модалът действително да бъде показан или скрит (т.е. преди събитието shown.bs.modalили да hidden.bs.modalсе появи).

събития

Модалният клас на Bootstrap разкрива няколко събития за свързване с модална функционалност. Всички модални събития се задействат в самия модал (т.е. в <div class="modal">).

Събитие Описание
hide.bs.modal Това събитие се задейства незабавно, когато hideметодът на екземпляра е извикан.
hidden.bs.modal Това събитие се задейства, когато модалът приключи да бъде скрит от потребителя (ще изчака CSS преходите да завършат).
hidePrevented.bs.modal Това събитие се задейства, когато модалът е показан, неговият фон е staticи се извършва щракване извън модала. Събитието също се задейства, когато се натисне клавишът за изход и keyboardопцията е зададена на false.
show.bs.modal Това събитие се задейства веднага, когато showсе извика методът на екземпляра. Ако е причинено от щракване, кликнатият елемент е достъпен като relatedTargetсвойство на събитието.
shown.bs.modal Това събитие се задейства, когато модалът е направен видим за потребителя (ще изчака CSS преходите да завършат). Ако е причинено от щракване, кликнатият елемент е достъпен като relatedTargetсвойство на събитието. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})