in English

Modal

Pêveka modal a JavaScript-ê ya Bootstrap bikar bînin da ku ji bo sivik, agahdariya bikarhêner, an naveroka tevahî xwerû diyalogan li malpera xwe zêde bikin.

Li ser vê rûpelê

Çawa dixebite

Berî ku hûn dest bi pêkhateya modal a Bootstrap-ê bikin, pê ewle bin ku hûn jêrîn bixwînin ji ber ku vebijarkên menuya me di van demên dawî de hatine guhertin.

Modal bi HTML, CSS, û JavaScriptê têne çêkirin. Ew li ser her tiştê din di belgeyê de cih digirin û ji pelgeyê derdixin <body>da ku naveroka modal li şûna wê bizivire.
Bi tikandina li ser modal "backdrop" dê modal bixweber bigire.
Bootstrap tenê yek carî pencereyek modal piştgirî dike. Modalên nested nayên piştgirî kirin ji ber ku em bawer dikin ku ew ezmûnên bikarhêner ên xizan in.
Modal bikar tînin position: fixed, ku carinan dikare di derbarê vegotina wê de hinekî taybetî be. Kengê ku gengaz be, HTML-a xweya modal li cîhek asta jorîn bi cîh bikin da ku ji destwerdana potansiyel a hêmanên din dûr bikevin. .modalDema ku hûn di nav hêmanek din a sabît de nehêlin hûn ê di nav pirsgirêkan de derkevin .
Careke din, ji ber position: fixed, di karanîna modalên li ser cîhazên mobîl de hin hişyarî hene. Ji bo hûragahiyan li belgeyên piştevaniya geroka me binêrin.
Ji ber ku HTML5 çawa semantîka xwe diyar dike, taybetmendiya autofocusHTML -ê di modalên Bootstrap de bandorek nake. Ji bo bidestxistina heman bandorê, hin JavaScript-a xwerû bikar bînin:

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

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

Bandora anîmasyonê ya vê hêmanê bi pirsa prefers-reduced-motionmedyayê ve girêdayî ye. Binêre beşa tevgera kêmkirî ya belgeya gihîştina me .

Ji bo demo û rêbernameyên karanîna xwendinê bidomînin.

Examples

Li jêr mînakek modal a statîk heye (wateya wê positionû displayhatî rakirin). Di nav de sernivîsa modal, laşê modal (ji bo pêdivî ye padding), û pêlava modal (vebijarkî) hene. Em daxwaz dikin ku hûn sernavên modal bi çalakiyên betalkirinê re her ku dibe bila bibin, an jî çalakiyek din a betalkirina eşkere peyda bikin.

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

Demo zindî

Bi tikandina bişkoja li jêr, demoyek modal a xebitandinê bişkînin. Ew ê ji jorê rûpelê ve biçe xwarê û têkeve hundur.

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

Backdrop statîk

Dema ku paşperdeya li ser statîk tê danîn, dema ku li derveyî wê bitikîne modal girtî nabe. Bişkojka jêrîn bikirtînin da ku wê biceribînin.

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

Scrolling naveroka dirêj

Dema ku modal ji bo dîmendera bikarhêner an cîhaza bikarhêner pir dirêj dibin, ew ji rûpelê bixwe dimeşin. Demoya jêrîn biceribînin ku em bibînin ka mebesta me çi ye.

Her weha hûn dikarin modalek gerok biafirînin ku destûrê dide laşê modal bi lêzêdekirina .modal-dialog-scrollableli .modal-dialog.

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

Vertically navend

Li navenda modalê ya vertîkal zêde .modal-dialog-centeredbikin ..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>

Tooltips û popovers

Li gorî hewcedariyên pêlav û popover dikarin di nav modalan de werin danîn. Dema ku modal têne girtin, her serişteyên amûr û popoverên hundur jî bixweber têne derxistin.

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

Tora bikar tînin

Pergala tora Bootstrap-ê di nav modalekê de bi hêlîna di .container-fluidhundurê de bikar bînin .modal-body. Dûv re, dersên pergala torê ya normal wekî ku hûn li cîhek din bikar bînin bikar bînin.

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

Xwedî komek bişkok hene ku hemî heman modalê bi naverokên hinekî cûda vedigirin? Taybetmendiyên HTML-ê bikar bînin event.relatedTargetda ku naveroka modalê li gorî kîjan bişkokê hatî klîk kirin biguhezînin.data-bs-*

Li jêr demoyek zindî ye ku li dû mînaka HTML û JavaScriptê ye. Ji bo bêtir agahdarî, ji bo hûrguliyên li ser belgeyên bûyerên modal bixwîninrelatedTarget .

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

Di navbera modalan de biguherînin

Di navbera gelek modalan de bi cîhkirina hin aqilmendî data-bs-targetû data-bs-toggletaybetmendiyan ve bizivirin. Mînakî, hûn dikarin modalek vesazkirina şîfreyê ji nav nîşanek modal a ku berê vekirî veguhezînin. Ji kerema xwe not bikin ku gelek modal di heman demê de nekarin vebin - ev rêbaz bi tenê di navbera du modalên cihêreng de diguhere.

Modala yekem vekin

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

Anîmasyon biguherînin

$modal-fade-transformGuherbar rewşa veguherînê ya berî .modal-dialoganîmasyona fade-in modal $modal-show-transformdiyar dike, guhêrbar veguherîna ya .modal-dialogli dawiya anîmasyona modal a fade-in diyar dike.

Heke hûn wek nimûne anîmasyonek zoom-in dixwazin, hûn dikarin saz bikin $modal-fade-transform: scale(.8).

Anîmasyonê rakin

Ji bo modalên ku bi hêsanî xuya dikin ne ku di nav dîtinê de biqewimin, polê ji nîşankirina modaliya xwe derxînin .fade.

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

Bilindahiya dînamîk

Ger bilindahiya modalekê di dema vekirî de biguhere, divê hûn bang bikin myModal.handleUpdate()ku pozîsyona modalê ji nû ve rast bikin heke barek gerok xuya bibe.

Gihîştina

Bê guman lê zêde bikin aria-labelledby="...", ku sernavê modalê re referans bikin, li .modal. Wekî din, hûn dikarin ravekirina diyaloga xweya modal bi aria-describedbyli ser re bidin .modal. Bala xwe bidinê ku hûn ne hewce ne ku lê zêde bikin role="dialog"ji ber ku em berê wê bi JavaScriptê lê zêde dikin.

Veguheztina vîdyoyên YouTube

Veguheztina vîdyoyên YouTube-ê di modalan de JavaScriptek din hewce dike ku ne di Bootstrap-ê de ye da ku bixweber lîstin û bêtir rawestîne. Ji bo bêtir agahdarî vê posta alîkar a Stack Overflow bibînin.

Mezinahiyên Bijarî

Modal sê mezinahiyên vebijarkî hene, ku bi navgîniya dersên guhêrbar ve têne peyda kirin ku li ser a .modal-dialog. Van mezinahî di hin xalên veqetandinê de dikevin da ku li ser dîmenderên teng ji hêlînên horizontî dûr bikevin.

Mezinayî	Sinif	Modal max-width
Biçûk	`.modal-sm`	`300px`
Destçûnî	Netû	`500px`
Mezin	`.modal-lg`	`800px`
Extra mezin	`.modal-xl`	`1140px`

Modala meya xwerû ya bê çîna guhêrbar modala mezinahiya "navîn" pêk tîne.

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

Vebijêrkek din vebijarkek vekêşana modalek e ku porta dîtina bikarhêner vedigire, ku bi navgîniya dersên guhêrbar ên ku li ser têne danîn peyda dibe .modal-dialog.

Sinif	Berdestbûnî
`.modal-fullscreen`	Herdem
`.modal-fullscreen-sm-down`	Jêrîn`576px`
`.modal-fullscreen-md-down`	Jêrîn`768px`
`.modal-fullscreen-lg-down`	Jêrîn`992px`
`.modal-fullscreen-xl-down`	Jêrîn`1200px`
`.modal-fullscreen-xxl-down`	Jêrîn`1400px`

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

Sass

Variables

$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

Modalên tev-ekranê bersivdar bi $breakpointsnexşeyê û pêvekek tê de têne çêkirin 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);
      }
    }
  }
}

Bikaranîna

Pêveka modal li gorî daxwazê, bi navgîniya taybetmendiyên daneyê an JavaScript-ê naveroka weya veşartî diguhezîne. Ew di heman demê de tevgera .modal-backdropgerokê ya xwerû li ser dike û klîkek peyda dike da ku modalên nîşankirî dema ku li derveyî modalê bitikîne ji holê rabike.

Bi taybetmendiyên daneyê

Bêyî nivîsandina JavaScriptê modalek çalak bikin. Li data-bs-toggle="modal"ser hêmanek kontrolker, mîna bişkokek, bi hev re data-bs-target="#foo"an jî href="#foo"ji bo veguheztina modalek taybetî were danîn.

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

Bi JavaScript

Bi yek rêzek JavaScriptê modalek biafirînin:

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

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-bs-, wekî di data-bs-backdrop="".

Nav	Awa	Destçûnî	Terîf
`backdrop`	boolean an string`'static'`	`true`	Hêmanek modal-backdrop tê de ye. Wekî din, `static`ji bo paşnavek ku modalê li ser klîk negire diyar bikin.
`keyboard`	boolean	`true`	Dema ku bişkojka revê tê pêlkirin modalê digire
`focus`	boolean	`true`	Dema ku dest pê dike bala xwe dide modalê.

Methods

Rêbaz û veguherînên Asynchronous

Hemî rêbazên API-ê asynkron in û veguherînek dest pê dikin . Gava ku veguhêz dest pê kir lê berî ku biqede ew vedigerin bangkerê . Wekî din, bangek rêbazek li ser pêkhateyek veguhêz dê were paşguh kirin.

Ji bo bêtir agahdarî li belgeya meya JavaScriptê binêre .

Vebijêrkên derbasbûnê

Naveroka we wekî modal çalak dike. Vebijarkek vebijarkî qebûl objectdike.

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

toggle

Modalek bi destan diguhezîne. Berî ku modal bi rastî were xuyang kirin an veşartin (ango berî ku bûyer shown.bs.modalan hidden.bs.modalbûyer çêbibe) vedigere bangkerê.

myModal.toggle()

rêdan

Bi destan modalek vedike. Berî ku modal bi rastî were xuyang kirin (ango berî ku shown.bs.modalbûyer çêbibe) vedigere bangewazî.

myModal.show()

Di heman demê de, hûn dikarin hêmanek DOM-ê wekî argumanek ku di bûyerên modal de (wek relatedTargetxwedan) de were wergirtin derbas bikin.

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

veşartin

Bi destan modalek vedişêre. Berî ku modal bi rastî veşêre (ango berî ku hidden.bs.modalbûyer çêbibe) vedigere bangewazî.

myModal.hide()

handleUpdate

Ger bilindahiya modalekê dema vekirî ye biguhere, bi destan pozîsyona modalê ji nû ve sererast bike (ango heke barek gerok xuya bibe).

myModal.handleUpdate()

avêtin

Modala hêmanekê hilweşîne. (Daneyên hilanîn ên li ser hêmana DOM-ê radike)

myModal.dispose()

getInstance

Rêbaza statîk ku dihêle hûn mînaka modal a ku bi hêmanek DOM-ê ve girêdayî ye bistînin

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

getOrCreateInstance

Rêbaza statîk ku destûrê dide te ku hûn mînakek modal a ku bi hêmanek DOM-ê ve girêdayî ye bistînin, an heke ew nehatibe destpêkirin yek nû biafirînin.

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

Events

Dersa modal a Bootstrap çend bûyeran ji bo girêdana fonksiyonên modal eşkere dike. Hemî bûyerên modal li modal bixwe (ango li <div class="modal">).

Cureyê bûyerê	Terîf
`show.bs.modal`	`show`Dema ku rêbaza nimûneyê tê gazî kirin ev bûyer tavilê dişewite. Ger ji ber klîkekê be, hêmana klîkkirî wekî `relatedTarget`taybetmendiya bûyerê peyda dibe.
`shown.bs.modal`	Dema ku modal ji bikarhênerê re xuya bibe ev bûyer tê şewitandin (dê li benda bidawîbûna veguheztinên CSS bimîne). Ger ji ber klîkekê be, hêmana klîkkirî wekî `relatedTarget`taybetmendiya bûyerê peyda dibe.
`hide.bs.modal`	`hide`Dema ku rêbaza nimûneyê hate gazîkirin , ev bûyer tavilê tê şewitandin .
`hidden.bs.modal`	Dema ku modal ji bikarhênerê veşartî qediya ev bûyer tê şewitandin (dê li benda bidawîbûna veguheztinên CSS bimîne).
`hidePrevented.bs.modal`	Dema ku modal tê xuyang kirin, paşperdeya wê ye `static`û klîkek li derveyî modalê an çapek bişkojka revê bi vebijarka klavyeyê tê kirin an `data-bs-keyboard`li ser `false`.

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