Modal

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

Ushbu sahifada

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:

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-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-bs-toggle="modal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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.

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

<!-- 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-bs-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 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-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.relatedTargetva HTML data-bs-*atributlaridan foydalaning .

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-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <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-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

Modallar o'rtasida almashish

data-bs-targetva data-bs-toggleatributlarini oqilona joylashtirish bilan bir nechta modallar o'rtasida almashish . Misol uchun, parolni tiklash modalni allaqachon ochiq kirish modali ichidan almashtirishingiz mumkin. E'tibor bering, bir vaqtning o'zida bir nechta modallarni ochib bo'lmaydi - bu usul ikkita alohida modal o'rtasida almashinadi.

Birinchi modalni oching

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

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

Yana bir bekor qilish - bu foydalanuvchi ko'rish oynasini qamrab oluvchi modalni ochish variantidir, uni o'zgartirish sinflari orqali mavjud .modal-dialog.

Sinf	Mavjudligi
`.modal-fullscreen`	Har doim
`.modal-fullscreen-sm-down`	Quyida`576px`
`.modal-fullscreen-md-down`	Quyida`768px`
`.modal-fullscreen-lg-down`	Quyida`992px`
`.modal-fullscreen-xl-down`	Quyida`1200px`
`.modal-fullscreen-xxl-down`	Quyida`1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

Sass

O'zgaruvchilar

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        rgba($black, .2);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

Loop

Toʻliq ekranli javob beruvchi modallar$breakpoints xarita orqali va scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

Foydalanish

Modal plagin ma'lumotlar atributlari yoki JavaScript orqali so'ralganda yashirin tarkibingizni almashtiradi. Shuningdek, u standart aylantirish harakatini bekor qiladi va .modal-backdropmodal tashqarisida bosilganda ko'rsatilgan modallarni o'chirish uchun bosish maydonini ta'minlash uchun a hosil qiladi.

Ma'lumotlar atributlari orqali

JavaScript yozmasdan modalni faollashtiring. Oʻzgartirish uchun muayyan modalni nishonga olish uchun yoki data-bs-toggle="modal"tugmasi kabi boshqaruvchi elementga oʻrnating .data-bs-target="#foo"href="#foo"

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

JavaScript orqali

JavaScript-ning bitta qatori bilan modal yarating:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Variantlar

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

Ism	Turi	Standart	Tavsif
`backdrop`	mantiqiy yoki satr`'static'`	`true`	Modal fon elementini o'z ichiga oladi. Shu bilan bir qatorda, `static`bosilganda modalni yopmaydigan fon uchun belgilang.
`keyboard`	mantiqiy	`true`	Escape tugmasi bosilganda modalni yopadi
`focus`	mantiqiy	`true`	Boshlanganda fokusni modalga qo'yadi.

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 .

O'tish variantlari

Kontentingizni modal sifatida faollashtiradi. Ixtiyoriy variantlarni qabul qiladi object.

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

almashtirish

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.toggle()

ko'rsatish

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

myModal.show()

Bundan tashqari, siz DOM elementini modal hodisalarda (xususiyat sifatida) qabul qilinishi mumkin bo'lgan argument sifatida topshirishingiz mumkin relatedTarget.

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

yashirish

Modalni qo'lda yashiradi. Modal yashirin bo'lishidan oldin (ya'ni hidden.bs.modalvoqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi.

myModal.hide()

qo'lni yangilash

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

myModal.handleUpdate()

tasarruf qilish

Elementning modalini yo'q qiladi. (DOM elementida saqlangan ma'lumotlarni o'chiradi)

myModal.dispose()

getInstance

DOM elementi bilan bog'langan modal misolni olish imkonini beruvchi statik usul

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

getOrCreateInstance

DOM elementi bilan bog'langan modal misolni olish yoki agar u ishga tushirilmagan bo'lsa, yangisini yaratish imkonini beruvchi statik usul

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

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.
`shown.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.
`hidden.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-bs-keyboard`ga o'rnatilganda ishga tushiriladi `false`.

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})