in English

Modal

Çyra gutulary, ulanyjy habarnamalary ýa-da düýbünden ýörite mazmun üçin sahypaňyza gepleşikler goşmak üçin Bootstrap-yň JavaScript modal pluginini ulanyň.

Bu sahypada

Bu nähili işleýär

“Bootstrap” -yň modal komponenti bilen başlamazdan ozal menýu opsiýalarymyzyň üýtgemegi sebäpli aşakdakylary okaň.

Modallar HTML, CSS we JavaScript bilen gurulýar. <body>Olar resminamadaky beýleki zatlaryň üstünde ýerleşýärler we modal mazmunyň ýerine aýlanmagy üçin aýlawy aýyrýarlar .
Modal “fonda” basylsa, modal awtomatiki usulda ýapylar.
Bootstrap bir gezekde diňe bir modal penjiräni goldaýar. Içerki modallar goldanylmaýar, sebäbi ulanyjylaryň pes tejribelerine ynanýarys.
Modallar ulanylýar position: fixed, käwagt onuň görkezilişi barada birneme aýratyn bolup biler. Mümkin boldugyça, beýleki elementleriň bolup biljek päsgelçiliklerinden gaça durmak üçin modal HTML-ni iň ýokary derejä goýuň. .modalBaşga bir kesgitli elementiň içinde höwürtge döredeniňizde kynçylyklara duçar bolarsyňyz .
Mobileene-de bir gezek, position: fixedykjam enjamlarda modal ulanýan käbir gowaklar bar. Jikme-jiklikler üçin brauzer goldaw resminamalarymyza serediň.
HTML5 semantikasyny nädip kesgitleýändigi sebäpli, HTML autofocusatributynyň Bootstrap modallarynda täsiri ýok. Şol bir effekt gazanmak üçin käbir JavaScript ulanyň:

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

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})

Bu komponentiň animasiýa täsiri prefers-reduced-motionmedia talaplaryna baglydyr. Elýeterlilik resminamalarymyzyň azaldylan hereket bölümine serediň .

Görkezişler we ulanyş görkezmeleri üçin okaň.

Mysallar

Aşakda statiki modal mysal (onuň manysyny aňladýar positionwe displayýokaşdy). Modal sözbaşy, modal korpus (zerur padding) we modal aşaky sözbaşy (islege görä) girýär. Mümkin boldugyça işden aýyrmak hereketleri bilen modal sözbaşylary goşmagyňyzy ýa-da başga bir aç-açan işden aýyrmagyňyzy haýyş edýäris.

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

Göni görkeziş

Aşakdaky düwmä basyp, işleýän modal demony üýtgediň. Aşakdan süýşer we sahypanyň ýokarsyndan pese gaçar.

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

Düşündiriş statiki görnüşde goýlanda, daşyna basylanda modal ýapylmaz. Synag üçin aşakdaky düwmä basyň.

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

Uzyn mazmuny aýlamak

Modallar ulanyjynyň görnüşi ýa-da enjamy üçin gaty uzyn bolanda, sahypanyň özünden garaşsyz aýlanýar. Näme diýjek bolýanymyzy görmek üçin aşakdaky demo synap görüň.

.modal-dialog-scrollableŞeýle hem, modal göwrümi goşmak bilen aýlamaga mümkinçilik berýän aýlanyp bolýan modal döredip bilersiňiz .modal-dialog.

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

Dik merkezde

Modaly dikligine merkezleşdirmek üçin .modal-dialog-centeredgoşuň ..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>

Gurallar we popovers

Gurallar we popovers zerur bolanda modallaryň içinde ýerleşdirilip bilner. Modallar ýapylanda, içindäki islendik gurallar we açyjylar hem awtomatiki usulda işden çykarylýar.

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

Paneli ulanmak

“Bootstrap” grid ulgamyny içerde höwürtge bilen modalyň içinde .container-fluidulanyň .modal-body. Soň bolsa, beýleki ýerlerde bolşy ýaly adaty set ulgamy sapaklaryny ulanyň.

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

Birneme üýtgeşik mazmunly birmeňzeş modaly herekete getirýän bir topar düwmeler barmy? Haýsy düwmä basylandygyna baglylykda modalyň mazmunyny üýtgetmek üçin HTML event.relatedTargetwe HTML data-bs-*atributlaryny ulanyň .

Aşakda HTML we JavaScript mysallary bilen göni ýaýlymda görkezilýär. Has giňişleýin maglumat üçin jikme-jiklikler üçin modal wakalaryň resminamalaryny okaňrelatedTarget .

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

Modallaryň arasynda çalşyň

Birnäçe modalyň data-bs-targetwe data-bs-toggleatributlaryň akylly ýerleşdirilmegi bilen çalşyň. Mysal üçin, modalda eýýäm açyk belginiň içinden paroly täzeden düzmek modalyny üýtgedip bilersiňiz. Bir wagtyň özünde birnäçe modalyň açyk bolup bilmejekdigine üns bermegiňizi haýyş edýäris - bu usul diňe iki aýry modalyň arasynda üýtgeýär.

Ilkinji modaly açyň

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

Animasiýany üýtgediň

$modal-fade-transformÜýtgeýji, modal ýitip barýan animasiýadan ozal üýtgeýän ýagdaýy kesgitleýär, üýtgeýji .modal-dialogmodal öçürilen animasiýanyň soňundaky $modal-show-transformüýtgemäni kesgitleýär ..modal-dialog

Mysal üçin ulaltmak animasiýasyny isleseňiz, sazlap bilersiňiz $modal-fade-transform: scale(.8).

Animasiýany aýyryň

Görmek üçin ýitip gitmän, ýönekeý görünýän modallar üçin .fadesynpy modal belligiňizden aýyryň.

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

Dinamiki belentlikler

Modalyň beýikligi açyk wagty üýtgese, myModal.handleUpdate()aýlaw paneli peýda bolan ýagdaýynda modalyň ýagdaýyny sazlamak üçin jaň etmeli.

Elýeterlilik

aria-labelledby="..."Modal adyna salgylanyp, goşuň .modal. Mundan başga-da, modal gepleşikleriňiziň düşündirişini berip aria-describedbybilersiňiz .modal. Goşmaly däldigiňize üns beriň, role="dialog"sebäbi eýýäm JavaScript arkaly goşýarys.

YouTube wideolaryny ýerleşdirmek

YouTube wideolaryny modallara ornaşdyrmak, Bootstrap-da däl, goşmaça JavaScript-i oýnamagy we başga-da köp zady talap edýär. Has giňişleýin maglumat üçin bu peýdaly “Stack overflow” ýazgysyna serediň .

Meýletin ululyklar

Modallarda üç sany goşmaça ululyk bar, a-da goýuljak üýtgediji synplar arkaly .modal-dialog. Bu ululyklar dar görnüşdäki gorizontal aýlaw panellerinden gaça durmak üçin belli bir nokatlara girýär.

Ölçegi	Synp	Modal maksimum giňlik
Kiçi	`.modal-sm`	`300px`
Bellenen	Hiç	`500px`
Uly	`.modal-lg`	`800px`
Goşmaça uly	`.modal-xl`	`1140px`

Üýtgediji synpsyz deslapky modalymyz “orta” ululyk modalyny düzýär.

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

Anotherene bir artykmaçlyk, a-da ýerleşdirilen üýtgediji synplar arkaly elýeterli ulanyjynyň görünişini öz içine alýan modaly açmak .modal-dialog.

Synp	Elýeterlilik
`.modal-fullscreen`	Elmydama
`.modal-fullscreen-sm-down`	Aşakda`576px`
`.modal-fullscreen-md-down`	Aşakda`768px`
`.modal-fullscreen-lg-down`	Aşakda`992px`
`.modal-fullscreen-xl-down`	Aşakda`1200px`
`.modal-fullscreen-xxl-down`	Aşakda`1400px`

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

Sass

Üýtgeýjiler

$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);

Aýlaw

Jogapkärçilikli doly ekran modallary$breakpoints karta we aýlaw arkaly döredilýär 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);
      }
    }
  }
}

Ulanylyşy

Modal plugin, gizlin mazmunyňyzy maglumat atributlary ýa-da JavaScript arkaly islege görä üýtgedýär. Şeýle hem, deslapky aýlanyş häsiýetini ýok edýär we .modal-backdropmodalyň daşyna basanyňyzda görkezilen modallary ýatyrmak üçin basmak meýdançasyny döredýär.

Maglumat atributlary arkaly

Toggle

JavaScript ýazman modaly işjeňleşdiriň. Dolandyryjy data-bs-toggle="modal"elementi, düwme ýaly, data-bs-target="#foo"ýa-da href="#foo"üýtgetmek üçin belli bir modaly nyşana alyň.

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

Işden aýyrmak

Aşakda görkezilişi ýaly modalyň içindäki düwmedäkidata atribut bilen işden aýrylyp bilner :

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

ýa-da aşakda görkezilişi ýaly modalyň daşyndaky düwmede :data-bs-target

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>

Modaly işden aýyrmagyň iki usuly hem goldanýan bolsa-da, modalyň daşyndan işden çykarmak WAI-ARIA modal gepleşik dizaýn görnüşine laýyk gelmeýändigini ýadyňyzdan çykarmaň . Muny öz töwekgelçiligiňiz bilen ediň.

JavaScript arkaly

JavaScript-iň bir setiri bilen modal dörediň:

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

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bs-bolşy ýaly goşuň data-bs-backdrop="".

Ady	Görnüşi	Bellenen	Düşündiriş
`backdrop`	bulean ýa-da setir`'static'`	`true`	Modal-fon elementini öz içine alýar. `static`Ativea- da bolmasa, basylanda modaly ýapmaýan fon üçin kesgitläň .
`keyboard`	boolean	`true`	Gaçmak düwmesi basylanda modaly ýapýar
`focus`	boolean	`true`	Başlanylanda ünsi modala gönükdirýär.

Usullar

Asynkron usullar we geçişler

APIhli API usullary asynkron bolup, geçişe başlaýar . Geçiş başlan badyna, ýöne gutarmanka jaň edijä gaýdyp gelýärler . Mundan başga-da, geçiş komponentine çagyryş usuly hasaba alynmaz .

Has giňişleýin maglumat üçin JavaScript resminamalarymyza serediň .

Geçiş opsiýalary

Mazmunyňyzy modal hökmünde işjeňleşdirýär. Goşmaça wariantlary kabul edýär object.

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

üýtgetmek

Modal bilen el bilen çalşyň. Modal hakykatdanam görkezilmän ýa-da gizlenmänkä (ýagny waka shown.bs.modalýa-da hidden.bs.modalwaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär.

myModal.toggle()

görkezmek

Modal bilen el bilen açýar. Modal görkezilmänkä (ýagny shown.bs.modalwaka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.

myModal.show()

relatedTargetŞeýle hem, modal hadysalarda ( emläk hökmünde) kabul edilip bilinjek argument hökmünde DOM elementini geçirip bilersiňiz .

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

gizle

Modaly el bilen gizleýär. Modal aslynda gizlenmänkä (ýagny waka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär .hidden.bs.modal

myModal.hide()

HandUpdate

Modalyň beýikligi açyk wagty üýtgese (meselem, aýlaw paneli peýda bolan ýagdaýynda) modalyň ýagdaýyny el bilen düzüň.

myModal.handleUpdate()

taşlaň

Bir elementiň modalyny ýok edýär. (DOM elementindäki saklanan maglumatlary aýyrýar)

myModal.dispose()

GetInstance

DOM elementi bilen baglanyşykly modal mysaly almaga mümkinçilik berýän statiki usul

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

getOrCreateInstance

DOM elementi bilen baglanyşykly modal mysaly almaga ýa-da başlamadyk ýagdaýynda täzesini döretmäge mümkinçilik berýän statiki usul.

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

Wakalar

“Bootstrap” -yň modal synpy modal işleýşi üçin birnäçe wakany paş edýär. Modhli modal wakalar modalyň özünde (ýagny <div class="modal">).

Çäräniň görnüşi	Düşündiriş
`show.bs.modal`	`show`Bu waka mysal usuly çagyrylanda derrew ýanýar . Bir gezek basmak bilen ýüze çykan bolsa, basylan element `relatedTarget`wakanyň häsiýeti hökmünde elýeterlidir.
`shown.bs.modal`	Bu waka modal ulanyja görünen mahaly atylýar (CSS geçişleriniň tamamlanmagyna garaşýar). Bir gezek basmak bilen ýüze çykan bolsa, basylan element `relatedTarget`wakanyň häsiýeti hökmünde elýeterlidir.
`hide.bs.modal`	Bu waka `hide`mysal usuly çagyrylanda derrew atylýar.
`hidden.bs.modal`	Bu waka, modal ulanyjydan gizlenip gutarandan soň atylýar (CSS geçişleriniň tamamlanmagyna garaşýar).
`hidePrevented.bs.modal`	Bu waka modal görkezilende, onuň fonunda bolýar `static`we modalyň daşyna basmak ýa-da klawiatura görnüşi bilen gaçmak düwmesini basmak ýerine ýetirilýär ýa-da `data-bs-keyboard`sazlanýar `false`.

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