Source

Модален

Користете го модалниот приклучок за JavaScript на Bootstrap за да додадете дијалози на вашата страница за светлосни кутии, кориснички известувања или целосно приспособена содржина.

Како работи

Пред да започнете со модалната компонента на Bootstrap, задолжително прочитајте го следново бидејќи нашите опции од менито неодамна се сменија.

  • Модалите се изградени со HTML, CSS и JavaScript. Тие се позиционирани над сè друго во документот и го отстрануваат лизгањето од, <body>така што модалната содржина се лизга наместо тоа.
  • Со кликнување на модалната „заднина“ автоматски ќе се затвори модалот.
  • Bootstrap поддржува само еден модален прозорец во исто време. Вгнездените модали не се поддржани бидејќи веруваме дека се лоши кориснички искуства.
  • Модалите користат position: fixed, што понекогаш може да биде малку особено за неговото прикажување. Секогаш кога е можно, поставете го вашиот модален HTML во позиција на највисоко ниво за да избегнете потенцијални пречки од други елементи. Веројатно ќе наидете на проблеми кога вгнездувате .modalво друг фиксен елемент.
  • Уште еднаш, поради position: fixed, има некои предупредувања за користење модали на мобилни уреди. Видете ги нашите документи за поддршка на прелистувачот за детали.
  • Поради тоа како HTML5 ја дефинира својата семантика, атрибутот autofocusHTML нема ефект во модалите на Bootstrap. За да го постигнете истиот ефект, користете некој прилагоден JavaScript:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Продолжете да читате за демо снимки и упатства за користење.

Примери

Подолу е статичен модален пример (што значи дека има 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-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</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="#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-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="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>

Совети за алатки и поповери

По потреба може да се постават совети за алатки и поповер во модали. Кога модалите се затворени, сите совети за алатки и поповери внатре исто така автоматски се отфрлаат.

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

Отстранете ја анимацијата

За модали кои едноставно се појавуваат наместо да бледнеат за да ги видите, отстранете ја .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-describedbyна .modal.

Вградување видеа на YouTube

Вградувањето видеа на YouTube во модали бара дополнителен JavaScript не во Bootstrap за автоматско запирање на репродукцијата и многу повеќе. Погледнете ја оваа корисна објава на Stack Overflow за повеќе информации.

Факултативни големини

Модалите имаат две опционални големини, достапни преку класите на модификатори за да се постават на .modal-dialog. Овие големини влегуваат во одредени точки на прекин за да се избегнат хоризонталните ленти за лизгање на потесни пристаништа за гледање.

<!-- 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">
    <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">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Употреба

Модалниот приклучок ја менува вашата скриена содржина на барање, преку атрибути на податоци или JavaScript. Тој, исто така, додава .modal-openна <body>замена за стандардното однесување на лизгање и генерира a .modal-backdropза да обезбеди област за кликнување за отфрлање на прикажаните модали кога се кликнува надвор од модалот.

Преку атрибути на податоци

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

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

Преку JavaScript

Повикајте модал со id 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ќе се повика методот на пример. Ако е предизвикано од кликнување, кликнатиот елемент е достапен како relatedTargetсвојство на настанот.
прикажани.бс.модални Овој настан се активира кога модалот е видлив за корисникот (ќе чека да се завршат транзициите на CSS). Ако е предизвикано од кликнување, кликнатиот елемент е достапен како relatedTargetсвојство на настанот.
скриј.бс.модален Овој настан се активира веднаш кога hideќе се повика методот на пример.
скриени.бс.модални Овој настан се активира кога модалот ќе заврши со криење од корисникот (ќе почека да се завршат транзициите на CSS). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})