Source

Modal

Saytingizga yorug'lik qutilari, foydalanuvchi bildirishnomalari yoki butunlay moslashtirilgan kontent uchun dialog oynalarini 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')
})

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-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</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>

Uzun kontentni aylantirish

Modallar foydalanuvchining ko'rish oynasi yoki qurilmasi uchun juda uzun bo'lsa, ular sahifaning o'zidan mustaqil ravishda aylanadi. Nima demoqchi ekanligimizni 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>

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

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>

Turli xil modal tarkib

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

Ko'rish uchun so'nish o'rniga oddiygina paydo bo'ladigan modallar uchun .fadesinfni modal belgilashingizdan olib tashlang.

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

Dinamik balandliklar

Agar modal ochiq bo'lganda uning balandligi o'zgarsa, $('#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 mumkin .aria-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. Qo'shimcha ma'lumot olish uchun ushbu foydali Stack Overflow postiga qarang.

Ixtiyoriy o'lchamlar

Modallar ikkita 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.

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

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. Oʻzgartirish uchun muayyan modalni nishonga olish uchun yoki data-toggle="modal"tugmasi kabi boshqaruvchi elementga oʻrnating .data-target="#foo"href="#foo"

<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, staticbosilganda 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'ni hidden.bs.modalvoqea 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 showmisol usuli chaqirilganda darhol ishga tushadi. Agar bosish sabab bo'lsa, bosilgan element relatedTargethodisaning 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 relatedTargethodisaning xususiyati sifatida mavjud.
hide.bs.modal Ushbu hodisa hidemisol usuli chaqirilganda darhol o'chiriladi.
yashirin.bs.modal Ushbu hodisa modal foydalanuvchidan yashirishni tugatgandan so'ng o'chiriladi (CSS o'tishlari tugashini kutadi). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})