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

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">
  <div class="modal-dialog">
    <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" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <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" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <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. Nima demoqchi ekanligimizni tushunish uchun quyidagi demoni sinab ko'ring.

What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.

Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground.

Just own the night like the 4th of July! I’m gon’ put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I’m gon’ put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.

You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by?

Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.

We'd keep all our promises be us against the world. If you get the chance you better keep her. It's time to bring out the big, big, big, big, big, big balloons. I hope you got a healthy appetite. Don't let the greatness get you down, oh, oh yeah. Yeah, she's footloose and so fancy free. I want the jaw droppin', eye poppin', head turnin', body shockin'. End of the rainbow looking treasure.

.modal-dialog-scrollablega qo'shish orqali modal tanasini aylantirish imkonini beruvchi aylantiriladigan modal yaratishingiz mumkin .modal-dialog.

What follows is just some placeholder text for this modal dialog. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

We'd keep all our promises be us against the world. In another life I would be your girl. We can dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching tattoos. So open up your heart and just let it begin. 'Cause she's the muse and the artist. She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I know one spark will shock the world, yeah yeah. If you only knew what the future holds.

Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Vertikal markazlashtirilgan

Modalni vertikal markazlashtirish uchun .modal-dialog-centeredqo'shing ..modal-dialog

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</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" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <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, o'rnatishingiz mumkin $modal-fade-transform: scale(.8).

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

aria-labelledby="..."Modal sarlavhaga havola qilib, ga qo'shishni unutmang .modal. aria-describedbyBundan tashqari, siz on bilan modal dialogingizning tavsifini berishingiz mumkin .modal. E'tibor bering, siz qo'shishingiz shart emas, role="dialog"chunki biz uni allaqachon JavaScript orqali qo'shdik.

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

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</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, `static`bosilganda 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 `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 klaviatura opsiyasi yoki `data-keyboard`ga o'rnatilganda ishga tushiriladi `false`.

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