Source

Modal

Saytingizga yorug'lik qutilari, foydalanuvchi bildirishnomalari yoki butunlay moslashtirilgan kontent uchun dialoglar qo'shish uchun Bootstrap's JavaScript modal plaginidan foydalaning.

U qanday ishlaydi

Bootstrap-ning modal komponentidan foydalanishni boshlashdan oldin, quyidagini o'qib chiqing, chunki bizning menyu variantlarimiz yaqinda o'zgargan.

Modallar HTML, CSS va JavaScript bilan yaratilgan. Ular hujjatdagi hamma narsaning ustiga joylashtiriladi va <body>modal tarkib o'rniga aylantirish uchun aylantirishni olib tashlang.
Modal "fon" ustiga bosish avtomatik ravishda modalni yopadi.
Bootstrap bir vaqtning o'zida faqat bitta modal oynani qo'llab-quvvatlaydi. Ichki modallar qo‘llab-quvvatlanmaydi, chunki ular foydalanuvchi tajribasini yomon deb hisoblaymiz.
Modallar dan foydalanadi position: fixed, bu ba'zan uning ko'rsatilishida biroz o'ziga xos bo'lishi mumkin. Iloji bo'lsa, boshqa elementlarning potentsial shovqinlarini oldini olish uchun modal HTML-ni yuqori darajali joyga qo'ying. .modalBoshqa sobit element ichiga joylashtirishda muammolarga duch kelishingiz mumkin.
Yana bir bor, tufayli position: fixedmobil qurilmalarda modallardan foydalanishda ba'zi ogohlantirishlar mavjud. Tafsilotlar uchun brauzerimizni qoʻllab-quvvatlash boʻlimiga qarang .
HTML5 o'z semantikasini qanday aniqlaganligi sababli , autofocusHTML atributi Bootstrap modallarida hech qanday ta'sir ko'rsatmaydi. Xuddi shu effektga erishish uchun ba'zi maxsus JavaScript-dan foydalaning:

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

Ushbu komponentning animatsiya effekti prefers-reduced-motionmedia so'roviga bog'liq. Maxsus imkoniyatlar hujjatlarimizning qisqartirilgan harakat bo'limiga qarang .

Namoyishlar va foydalanish ko'rsatmalarini o'qishni davom eting.

Misollar

Quyida statik modal misol keltirilgan (uning positionva displaybekor qilingan degan ma'noni anglatadi). Modal sarlavha, modal tanasi ( uchun talab qilinadi padding) va modal altbilgi (ixtiyoriy) kiradi. Iloji bo'lsa, rad etish amallari bilan modal sarlavhalarni kiritishingizni yoki boshqa ochiq-oydin rad etish amalini taqdim etishingizni so'raymiz.

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

Jonli demo

Quyidagi tugmani bosish orqali ishlaydigan modal demoni almashtiring. U pastga siljiydi va sahifaning yuqori qismidan o'chib ketadi.

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

Statik fon

Fon statik holatga o'rnatilgan bo'lsa, modal uning tashqarisiga bosilganda yopilmaydi. Sinab ko'rish uchun quyidagi tugmani bosing.

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

Uzun kontentni aylantirish

Modallar foydalanuvchining ko'rish oynasi yoki qurilmasi uchun juda uzun bo'lsa, ular sahifaning o'zidan mustaqil ravishda aylanadi. Biz nimani nazarda tutayotganimizni tushunish uchun quyidagi demoni sinab ko'ring.

<!-- 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-scrollablega qo'shish orqali modal tanasini aylantirish imkonini beruvchi aylantiriladigan modal yaratishingiz mumkin .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>

Vertikal markazlashtirilgan

Modalni vertikal markazlashtirish uchun .modal-dialog-centeredqo'shing ..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>

Maslahatlar va popoverlar

Maslahatlar va popoverlar kerak bo'lganda modallarga joylashtirilishi mumkin. Modallar yopilganda, ichidagi barcha maslahatlar va popoverlar ham avtomatik ravishda o'chiriladi.

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

To'rdan foydalanish

Bootstrap grid tizimidan modal .container-fluidichida joylashtirish orqali foydalaning .modal-body. Keyin, boshqa joyda bo'lgani kabi oddiy grid tizimi sinflaridan foydalaning.

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

Hammasi biroz boshqacha tarkibga ega bir xil modalni ishga tushiradigan bir nechta tugmalar bormi? Qaysi tugma bosilganiga qarab modal tarkibini o'zgartirish uchun event.relatedTargetHTML atributlaridan data-*foydalaning ( ehtimol jQuery orqali ).

Quyida jonli demo, undan keyin HTML va JavaScript misoli keltirilgan. Qo'shimcha ma'lumot olish uchun modal voqealar hujjatlarini o'qingrelatedTarget .

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

Animatsiyani o'zgartirish

O'zgaruvchi modal fade-in animatsiyasidan oldin $modal-fade-transformning o'zgartirish holatini aniqlaydi, o'zgaruvchi modal fade-in animatsiyasi oxirida -ning transformatsiyasini aniqlaydi ..modal-dialog$modal-show-transform.modal-dialog

Masalan, kattalashtirish animatsiyasini xohlasangiz, sozlashingiz mumkin$modal-fade-transform: scale(.8) .

Animatsiyani olib tashlang

Koʻrish uchun oʻchmasdan koʻrinadigan modallar uchun ni olib tashlang.fade sinfni modal belgilashingizdan olib tashlang.

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

Dinamik balandliklar

Agar modal ochiq bo'lsa, uning balandligi o'zgarsa, siz qo'ng'iroq qilishingiz kerak$('#myModal').modal('handleUpdate') aylantirish paneli paydo bo'lganda modal o'rnini qayta sozlash uchun qo'ng'iroq qilishingiz kerak.

Foydalanish imkoniyati

Modal sarlavhaga havola qilib, va ni qo'shishni unutmang, to role="dialog"ga va o'ziga . Bundan tashqari, siz on bilan modal dialogingizning tavsifini berishingiz mumkinaria-labelledby="...".modalrole="document".modal-dialogaria-describedby.modal .

YouTube videolarini joylashtirish

YouTube videolarini modallarga joylashtirish, ijroni avtomatik ravishda to‘xtatish va boshqalar uchun Bootstrap-da bo‘lmagan qo‘shimcha JavaScript-ni talab qiladi. Ushbu foydali Stack Overflow postiga qarang qarang.

Ixtiyoriy o'lchamlar

Modallar uchta ixtiyoriy o'lchamga ega bo'lib, ularni o'zgartirish sinflari orqali joylashtirish mumkin .modal-dialog. Ushbu o'lchamlar torroq ko'rish oynalarida gorizontal aylantirish panellarini oldini olish uchun ma'lum to'xtash nuqtalarida boshlanadi.

Hajmi	Sinf	Modal maksimal kenglik
Kichik	`.modal-sm`	`300px`
Standart	Yo'q	`500px`
Katta	`.modal-lg`	`800px`
Juda katta	`.modal-xl`	`1140px`

Modifikator sinfi bo'lmagan standart modalimiz "o'rta" o'lchamdagi modalni tashkil qiladi.

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

Foydalanish

Modal plagin ma'lumotlar atributlari yoki JavaScript orqali so'ralganda yashirin tarkibingizni almashtiradi. Shuningdek , u standart aylantirish harakatini bekor qilish uchun qo'shadi va modaldan tashqarida bosilganda ko'rsatilgan modallarni o'chirish uchun bosish maydonini ta'minlash uchun a hosil .modal-openqiladi .<body>.modal-backdrop

Ma'lumotlar atributlari orqali

JavaScript yozmasdan modalni faollashtiring. Kontroller elementiga, masalan, tugma yoki data-toggle="modal"bilan birga o'rnatingdata-target="#foo"href="#foo"Oʻzgartirish uchun muayyan modalni nishonga olish uchun

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

JavaScript orqali

myModalBir qator JavaScript bilan identifikatorli modalni chaqiring :

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

Variantlar

Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-backdrop="".

Ism	Turi	Standart	Tavsif
fon	mantiqiy yoki satr`'static'`	rost	Modal fon elementini o'z ichiga oladi. Shu bilan bir qatorda, `static`bosish yoki qochish tugmachasini bosish bilan modalni yopmaydigan fon uchun belgilang.
klaviatura	mantiqiy	rost	Escape tugmasi bosilganda modalni yopadi
diqqat	mantiqiy	rost	Boshlanganda fokusni modalga qo'yadi.
ko'rsatish	mantiqiy	rost	Initsializatsiya qilinganda modalni ko'rsatadi.

Usullari

Asinxron usullar va o'tishlar

Barcha API usullari asenkron va o'tishni boshlaydi . O'tish boshlanishi bilanoq, lekin tugashidan oldin ular qo'ng'iroq qiluvchiga qaytadilar . Bundan tashqari, o'tish komponentidagi usul chaqiruvi e'tiborga olinmaydi .

Qo'shimcha ma'lumot olish uchun bizning JavaScript hujjatlariga qarang .

`.modal(options)`

Kontentingizni modal sifatida faollashtiradi. Ixtiyoriy variantlarni qabul qiladi object.

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

`.modal('toggle')`

Modalni qo'lda almashtiradi. Modal haqiqatda ko'rsatilishi yoki yashirilishidan oldin (ya'ni yoki hodisa sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .shown.bs.modalhidden.bs.modal

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

`.modal('show')`

Modalni qo'lda ochadi. Modal ko'rsatilgunga qadar (ya'ni voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .shown.bs.modal

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

`.modal('hide')`

Modalni qo'lda yashiradi. Modal yashirin bo'lishidan oldin (ya'nihidden.bs.modal voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi.

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

`.modal('handleUpdate')`

Modalning balandligi ochiq holatda o'zgarsa (ya'ni aylantirish paneli paydo bo'lsa) modal o'rnini qo'lda qayta sozlang.

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

`.modal('dispose')`

Elementning modalini yo'q qiladi.

Voqealar

Bootstrap-ning modal klassi modal funksionallikka ulanish uchun bir nechta hodisalarni ochib beradi. Barcha modal hodisalar modalning o'ziga qaratiladi (ya'ni <div class="modal">).

Tadbir turi	Tavsif
show.bs.modal	Ushbu hodisa `show`misol usuli chaqirilganda darhol ishga tushadi. Agar bosish sabab bo'lsa, bosilgan element `relatedTarget`hodisaning xususiyati sifatida mavjud.
ko'rsatilgan.bs.modal	Ushbu hodisa modal foydalanuvchiga ko'rinadigan holga keltirilgach, ishga tushiriladi (CSS o'tishlari tugashini kutadi). Agar bosish sabab bo'lsa, bosilgan element `relatedTarget`hodisaning xususiyati sifatida mavjud.
hide.bs.modal	Ushbu hodisa `hide`misol usuli chaqirilganda darhol o'chiriladi.
yashirin.bs.modal	Ushbu hodisa modal foydalanuvchidan yashirishni tugatgandan so'ng o'chiriladi (CSS o'tishlari tugashini kutadi).
hidePrevented.bs.modal	Ushbu hodisa modal ko'rsatilganda, uning fonida `static`va modal tashqarisida bosish yoki qochish tugmachasini bosish amalga oshirilganda ishga tushiriladi.

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