Source

Модален

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

Как работи

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

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

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

Анимационният ефект на този компонент зависи от prefers-reduced-motionмедийната заявка. Вижте раздела за намалено движение в нашата документация за достъпност .

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

Примери

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

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

Демо на живо

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

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

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Статичен фон

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

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

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

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

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

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

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

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

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

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

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

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

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

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

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

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

<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-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 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-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-*атрибути (възможно чрез jQuery ), за да променяте съдържанието на модала в зависимост от това кой бутон е щракнат.

По-долу има демонстрация на живо, последвана от примерен HTML и JavaScript. За повече информация прочетете документите за модални събития за подробности относно relatedTarget.

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

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <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-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

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

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

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

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

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

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

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

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

Достъпност

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

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

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

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

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

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

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

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Използване

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

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

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

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

Чрез JavaScript

Извикайте модал с идентификатор myModalс един ред на JavaScript:

$('#myModal').modal(options)

Настроики

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

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

Методи

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

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

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

`.modal(options)`

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

$('#myModal').modal({
  keyboard: false
})

`.modal('toggle')`

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

$('#myModal').modal('toggle')

`.modal('show')`

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

$('#myModal').modal('show')

`.modal('hide')`

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

$('#myModal').modal('hide')

`.modal('handleUpdate')`

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

$('#myModal').modal('handleUpdate')

`.modal('dispose')`

Унищожава модала на елемент.

събития

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

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

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})