in English

Модален

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

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

Как работи

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

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

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

myModal.addEventListener('shown.bs.modal', function () {
  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 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>

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

Използвайте мрежовата система 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.

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

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

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

Отворете първия модал

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

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

Променливата $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>

дързък

Променливи

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

Цикъл

Отзивчивите модали на цял екран се генерират чрез $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 {
        @include border-radius(0);
      }

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

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

Използване

Модалният плъгин превключва вашето скрито съдържание при поискване, чрез атрибути на данни или 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>

Чрез JavaScript

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

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

Настроики

Опциите могат да се предават чрез атрибути на данни или JavaScript. За атрибути на данни добавете името на опцията към data-bs-, както в data-bs-backdrop="".

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

Методи

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

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

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

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

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

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

превключвам

Ръчно превключва модал. Връща се към повикващия, преди модалът действително да бъде показан или скрит (т.е. преди събитието shown.bs.modalили да hidden.bs.modalсе появи).

myModal.toggle()

шоу

Ръчно отваря модал. Връща се към повикващия, преди модалът действително да бъде показан (т.е. преди shown.bs.modalсъбитието да се случи).

myModal.show()

Освен това можете да подадете DOM елемент като аргумент, който може да бъде получен в модалните събития (като relatedTargetсвойството).

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

Крия

Ръчно скрива модал. Връща се към повикващия, преди модалът действително да е бил скрит (т.е. преди да hidden.bs.modalсе случи събитието).

myModal.hide()

handleUpdate

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

myModal.handleUpdate()

изхвърлям

Унищожава модала на елемент. (Премахва съхранените данни в DOM елемента)

myModal.dispose()

getInstance

Статичен метод, който ви позволява да получите модалния екземпляр, свързан с DOM елемент

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

getOrCreateInstance

Статичен метод, който ви позволява да получите модалния екземпляр, свързан с DOM елемент, или да създадете нов, в случай че не е инициализиран

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

събития

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

Тип събитие	Описание
`show.bs.modal`	Това събитие се задейства веднага, когато `show`се извика методът на екземпляра. Ако е причинено от щракване, кликнатият елемент е достъпен като `relatedTarget`свойство на събитието.
`shown.bs.modal`	Това събитие се задейства, когато модалът е направен видим за потребителя (ще изчака CSS преходите да завършат). Ако е причинено от щракване, кликнатият елемент е достъпен като `relatedTarget`свойство на събитието.
`hide.bs.modal`	Това събитие се задейства незабавно, когато `hide`методът на екземпляра е извикан.
`hidden.bs.modal`	Това събитие се задейства, когато модалът приключи да бъде скрит от потребителя (ще изчака CSS преходите да завършат).
`hidePrevented.bs.modal`	Това събитие се задейства, когато модалът е показан, неговият фон е `static`и щракване извън модала или натискане на клавиш за излизане се извършва с опцията на клавиатурата или `data-bs-keyboard`е зададено на `false`.

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