Modal

Shandisa Bootstrap's JavaScript modal plugin kuti uwedzere dialog kune yako saiti yemabhokisi emwenje, zviziviso zvevashandisi, kana zvizere zvemukati zvemukati.

Pa peji ino

Zvinoshanda sei

Usati watanga neBootstrap's modal component, iva nechokwadi chekuverenga zvinotevera sezvo sarudzo dzedu dzemenu dzakangochinja.

Modals dzakavakwa neHTML, CSS, uye JavaScript. Ivo vakamisikidzwa pamusoro pezvimwe zvese zviri mugwaro uye bvisa mupumburu kubva kune <body>kuti modal zvemukati zvipumburuke panzvimbo.
Kudzvanya pane modal "kumashure" kunozovhara modal.
Bootstrap inongotsigira imwe modal hwindo panguva. Nested modals hadzitsigirwe sezvo isu tichitenda kuti hadzina ruzivo rwevashandisi.
Modals inoshandisa position: fixed, iyo dzimwe nguva inogona kuve yakati wandei nezve kupa kwayo. Pese pazvinogoneka, isa yako modal HTML munzvimbo yepamusoro-yepamusoro kudzivirira kukanganisa kunogona kubva kune zvimwe zvinhu. Iwe ungangosangana nematambudziko kana uchinge waisa .modalmukati mechimwe chinhu chakagadziriswa.
Zvekare, nekuda kwe position: fixed, kune mamwe macaveats nekushandisa modal pane nharembozha. Ona yedu bhurawuza rutsigiro docs kuti uwane ruzivo.
Nekuda kwekuti HTML5 inotsanangura sei semantics yayo, iyo autofocusHTML hunhu haina mhedzisiro muBootstrap modal. Kuti uwane maitiro akafanana, shandisa imwe tsika JavaScript:

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

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

Iyo animation mhedzisiro yechikamu ichi zvinoenderana prefers-reduced-motionnemubvunzo wenhau. Ona chikamu chakaderedzwa chezvinyorwa zvedu zvekusvikika .

Ramba uchiverengera demos uye nhungamiro yekushandisa.

Mienzaniso

Pazasi pane static modal muenzaniso (zvichireva kuti positionuye displayzvakapfuura). Inosanganisirwa iyo modal musoro, modal muviri (inodiwa padding), uye modal footer (sarudzo). Tinokumbira kuti ubatanidze misoro yemodal ine zviito zvekudzinga pese pazvinogoneka, kana kuti upe chimwe chiito chakajeka chekudzinga.

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

Live demo

Shandura demodhi yekushanda nekudzvanya bhatani riri pazasi. Ichatsvedza pasi uye kupera mukati kubva kumusoro kwepeji.

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

Static backdrop

Kana kuseri kwakaiswa kune static, modal haivhare kana uchidzvanya kunze kwayo. Baya bhatani riri pazasi kuti uzviedze.

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

Kupuruzira zvemukati marefu

Kana modal dzarebesa pakuona kwemushandisi kana mudziyo, ivo vanofamba vakazvimiririra kubva papeji pachayo. Edza demo pazasi kuti uone zvatiri kureva.

Iwe unogona zvakare kugadzira modal inotenderera inobvumira kupuruzira modal muviri nekuwedzera .modal-dialog-scrollablekune .modal-dialog.

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

Vertically pakati

Wedzera .modal-dialog-centeredkune .modal-dialogvertically pakati modal.

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

Zvishandiso uye popovers zvinogona kuiswa mukati memodals sezvinodiwa. Kana modal dzakavharwa, chero maturusi ezvishandiso uye mapopovers mukati anoraswa otomatiki.

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

Kushandisa grid

Shandisa iyo Bootstrap grid system mukati me modal nekuisa .container-fluidmukati meiyo .modal-body. Zvadaro, shandisa akajairwa grid system makirasi sezvaungaita kumwe kumwe.

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

Iva neboka remabhatani ayo ese anokonzeresa imwe modal ine zvishoma zvakasiyana zviri mukati? Shandisa event.relatedTargetuye HTML data-bs-*hunhu kusiyanisa zviri mukati me modal zvichienderana nekuti bhatani ripi rakadzvanywa.

Pazasi pane demo mhenyu inoteverwa nemuenzaniso HTML neJavaScript. Kuti uwane rumwe ruzivo, verenga modal zviitiko zvinyorwa zveruzivo nezve 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
})

Toggle pakati modals

Shandura pakati pemamodal akawanda ane kumwe kungwara kwekuiswa kweiyo data-bs-targetuye data-bs-togglehunhu. Semuenzaniso, unogona kushandura password reset modal kubva mukati meiyo yatovhurwa sign in modal. Ndapota cherechedza kuti modals dzakawanda hadzigoni kuvhurwa panguva imwe chete-iyi nzira inongochinja pakati pemhando mbiri dzakasiyana.

Vhura yekutanga modal

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

Chinja animation

Musiyano $modal-fade-transformunotara mamiriro eshanduko .modal-dialogisati yaita modal fade-mu animation, $modal-show-transformshanduko inotara shanduko .modal-dialogyepanoperera modal fade-in animation.

Kana iwe uchida semuenzaniso zoom-in animation, unogona kuseta $modal-fade-transform: scale(.8).

Bvisa animation

Kune ma modal anongooneka pane kudzima kuti aone, bvisa .fadekirasi kubva pane yako modal markup.

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

Dynamic heights

Kana hurefu hwe modal huchichinja ichiri kuvhurika, iwe unofanirwa kufona myModal.handleUpdate()kuti ugadzirise chinzvimbo che modal kuitira kana scrollbar ikaoneka.

Accessibility

Iva nechokwadi chekuwedzera aria-labelledby="...", uchireva zita re modal, ku .modal. Pamusoro pezvo, iwe unogona kupa tsananguro yemodal dialog yako ne aria-describedbypa .modal. Ziva kuti haufanire kuwedzera role="dialog"sezvo isu tatozviwedzera kuburikidza neJavaScript.

Kubatanidza mavhidhiyo eYouTube

Kuisa mavhidhiyo eYouTube mumodals kunoda yekuwedzera JavaScript isiri muBootstrap kuti imise otomatiki kutamba nezvimwe. Ona iyi inobatsira Stack Overflow post kuti uwane rumwe ruzivo.

Optional sizes

Modals ine matatu esarudzo saizi, anowanikwa kuburikidza ne modifier makirasi kuti aiswe pa .modal-dialog. Aya saizi anopinda mune mamwe mabreakpoints kudzivirira akachinjika scrollbar pane nhete dzekutarisa.

Size	Kirasi	Modal max-width
Diki	`.modal-sm`	`300px`
Default	Hapana	`500px`
Zvikuru	`.modal-lg`	`800px`
Kuwedzera kukuru	`.modal-xl`	`1140px`

Yedu default modal isina modifier kirasi inoumba "yepakati" saizi modal.

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

Imwe yakawedzera isarudzo yekuburitsa modal inovhara mushandisi yekutarisa, inowanikwa kuburikidza ne modifier makirasi anoiswa pane .modal-dialog.

Kirasi	Kuwanikwa
`.modal-fullscreen`	Nguva dzose
`.modal-fullscreen-sm-down`	Pazasi`576px`
`.modal-fullscreen-md-down`	Pazasi`768px`
`.modal-fullscreen-lg-down`	Pazasi`992px`
`.modal-fullscreen-xl-down`	Pazasi`1200px`
`.modal-fullscreen-xxl-down`	Pazasi`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

Inopindura yakazara skrini modhi inogadzirwa kuburikidza $breakpointsnemepu uye loop mu 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);
      }
    }
  }
}

Usage

Iyo modal plugin inoshandura yako yakavanzika yemukati paunoda, kuburikidza nedata hunhu kana JavaScript. Iyo zvakare inodarika maitiro ekusagadzika ekupurudzira uye inogadzira .modal-backdropkuti ipe nzvimbo yekudzvanya yekudzinga yakaratidzwa modal kana uchidzvanya kunze kwe modal.

Via data hunhu

Toggle

Shandisa modal pasina kunyora JavaScript. Gadzirisa data-bs-toggle="modal"chinhu chekutonga, sebhatani, pamwe chete nea data-bs-target="#foo"kana href="#foo"kunanga imwe modhi yekushandura.

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

Dzinga

Kudzingwa kunogona kuwanikwa datanehunhu huri pabhatani mukati me modal sezvakaratidzwa pazasi:

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

kana pane bhatani riri kunze kwe modal uchishandisa data-bs-targetsezvaratidzwa pazasi:

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

Nepo nzira dzese dziri mbiri dzekudzinga modal dzichitsigirwa, ziva kuti kudzinga kunze kwe modal hakuenderane neWAI-ARIA modal dialog design pattern . Ita izvi nengozi yako.

Via JavaScript

Gadzira modal ine mutsara mumwechete weJavaScript:

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

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-bs-, semu data-bs-backdrop="".

Zita	Type	Default	Tsanangudzo
`backdrop`	boolean kana tambo`'static'`	`true`	Inosanganisira modal-backdrop element. Neimwe nzira, tsanangura `static`kune yekumashure iyo isingavhare modal pakudzvanya.
`keyboard`	boolean	`true`	Inovhara modal kana kiyi yekutiza ikadzvanywa
`focus`	boolean	`true`	Inoisa tarisiro pane modal kana yatangwa.

Nzira

Asynchronous nzira uye shanduko

Yese nzira dzeAPI dzine asynchronous uye dzinotanga shanduko . Vanodzokera kumunhu anenge afona pachangotanga shanduko asi isati yapera . Pamusoro pezvo, kufona kwenzira pachikamu chekuchinja kuchafuratirwa .

Ona zvinyorwa zvedu zveJavaScript kuti uwane rumwe ruzivo .

Kupfuura sarudzo

Inomisa zvirimo zvako se modal. Inobvuma sarudzo dzaungada object.

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

toggle

Pamaoko anoshandura modal. Inodzokera kune akafona modal isati yanyatsoratidzwa kana kuvanzwa (kureva kuti shown.bs.modalkana hidden.bs.modalchiitiko chisati chaitika).

myModal.toggle()

show

Nemaoko anovhura modal. Inodzokera kune akafona modal isati yanyatsoratidzwa (kureva kuti shown.bs.modalchiitiko chisati chaitika).

myModal.show()

Zvakare, iwe unogona kupfuudza chinhu cheDOM senharo inogona kugamuchirwa mune modal zviitiko (senzvimbo relatedTarget).

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

hide

Anozvivanza modal. Inodzokera kune akafona modal isati yanyatsovanzwa (kureva kuti hidden.bs.modalchiitiko chisati chaitika).

myModal.hide()

handleUpdate

Rongedza nemaoko chinzvimbo che modal kana kureba kwe modal ikachinja payakavhurika (kureva kuti kana scrollbar ikabuda).

myModal.handleUpdate()

kurasa

Inoparadza modal yechinhu. (Inobvisa data rakachengetwa pachinhu cheDOM)

myModal.dispose()

getInstance

Static nzira iyo inokutendera iwe kuti uwane iyo modal muenzaniso yakabatana neiyo DOM chinhu

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

getOrCreateInstance

Static nzira iyo inokutendera iwe kuti uwane iyo modal muenzaniso yakabatana neDOM chinhu, kana kugadzira imwe nyowani kana isina kutangwa.

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

Zviitiko

Bootstrap's modal kirasi inofumura zviitiko zvishoma zvekukochekera kuita modal mashandiro. Zvese zviitiko zve modal zvinodzingwa pa modal pachayo (kureva pa <div class="modal">).

Chiitiko mhando	Tsanangudzo
`show.bs.modal`	Ichi chiitiko chinopisa nekukasira kana `show`nzira yemuenzaniso inodanwa. Kana ikakonzerwa nekudzvanya, chinhu chakadzvanywa chinowanikwa sechinhu `relatedTarget`chechiitiko.
`shown.bs.modal`	Ichi chiitiko chinodzingwa kana modal yaitwa kuti ionekwe kumushandisi (inomirira kuti CSS shanduko ipedze). Kana ikakonzerwa nekudzvanya, chinhu chakadzvanywa chinowanikwa sechinhu `relatedTarget`chechiitiko.
`hide.bs.modal`	Ichi chiitiko chinodzingwa nekukasira kana iyo `hide`muenzaniso nzira yadaidzwa.
`hidden.bs.modal`	Ichi chiitiko chinodzingwa kana modal yapedza kuvanzwa kubva kumushandisi (inomirira kuti CSS shanduko ipedze).
`hidePrevented.bs.modal`	Chiitiko ichi chinodzingwa kana modal yaratidzwa, kumashure kwayo `static`uye kudzvanya kunze kwe modal kana kutiza kiyi yekutsikirira inoitwa neiyo keyboard sarudzo kana `data-bs-keyboard`kusetwa ku `false`.

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