Source

Modal

Bootstrap'тин JavaScript модалдык плагинин сайтыңызга лайт кутучалары, колдонуучу эскертмелери же толугу менен ыңгайлаштырылган мазмун үчүн диалогдорду кошуу үчүн колдонуңуз.

Бул кантип иштейт

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-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="#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="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)
})

Анимацияны алып салуу

Көрүү үчүн өчүп калбастан, жөн гана пайда болгон модалдар үчүн .fadeклассты модалдык белгилөөдөн алып салыңыз.

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

Динамикалык бийиктиктер

Эгерде модалдын бийиктиги ал ачык турганда өзгөрсө, $('#myModal').modal('handleUpdate')сыдырма тилкеси пайда болгон учурда модалдын абалын кайра тууралоо үчүн чакыруу керек.

Жеткиликтүүлүк

Модалдык аталышка шилтеме кылуу role="dialog"менен жана дегенди кошууну унутпаңыз , ага жана өзүнө. Кошумча, сиз on менен модалдык диалогуңуздун сүрөттөмөсүн бере аласыз .aria-labelledby="...".modalrole="document".modal-dialogaria-describedby.modal

YouTube видеолорун кыстаруу

YouTube видеолорун модалдарга кыстаруу ойнотууну автоматтык түрдө токтотуу үчүн Bootstrap'те эмес, кошумча JavaScriptти талап кылат жана башкалар. Көбүрөөк маалымат алуу үчүн бул пайдалуу 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>.modal-backdrop

Маалымат атрибуттары аркылуу

JavaScript жазбастан модалды активдештирүү. Которуу үчүн белгилүү бир модалды максаттоо үчүн же data-toggle="modal"баскычы сыяктуу контроллердин элементине орнотуңуз .data-target="#foo"href="#foo"

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

JavaScript аркылуу

myModalJavaScript бир сап менен id менен модалды чакырыңыз :

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

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-backdrop="".

аты Type Демейки Description
фон логикалык же сап'static' чын Модалдык көшөгө элементин камтыйт. Же болбосо, staticчыкылдатканда модалды жаппаган фон үчүн көрсөтүңүз.
клавиатура логикалык чын Escape баскычы басылганда модалды жабат
көңүл буруу логикалык чын Инициализацияланганда фокусту модалга коет.
көрсөтүү логикалык чын Инициализацияланганда модалды көрсөтөт.

Методдор

Асинхрондук методдор жана өтүүлөр

Бардык 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">.

Окуя түрү Description
show.bs.modal Бул окуя showинстанция ыкмасы чакырылганда дароо күйөт. Эгерде чыкылдатуу менен шартталган болсо, анда басылган элемент relatedTargetокуянын менчиги катары жеткиликтүү болот.
show.bs.modal Бул окуя модаль колдонуучуга көрүнгөндөн кийин өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт). Эгерде чыкылдатуу менен шартталган болсо, анда басылган элемент relatedTargetокуянын менчиги катары жеткиликтүү болот.
hide.bs.modal Бул окуя hideинстанция ыкмасы чакырылганда дароо өчүрүлөт.
hidden.bs.modal Бул окуя модаль колдонуучудан жашырылгандан кийин өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})