in English

Modalno

Uporabite Bootstrapov modalni vtičnik JavaScript, da svojemu spletnemu mestu dodate pogovorna okna za svetlobne okvirje, obvestila uporabnikov ali popolnoma prilagojeno vsebino.

Na tej strani

Kako deluje

Preden začnete uporabljati modalno komponento Bootstrap, ne pozabite prebrati naslednjega, saj so se naše menijske možnosti nedavno spremenile.

Modali so zgrajeni s HTML, CSS in JavaScript. Postavljeni so nad vse ostalo v dokumentu in odstranijo drsenje iz, <body>tako da se namesto tega premika modalna vsebina.
S klikom na modalno »ozadje« se modal samodejno zapre.
Bootstrap podpira samo eno modalno okno naenkrat. Ugnezdeni modali niso podprti, ker menimo, da povzročajo slabo uporabniško izkušnjo.
Modali uporabljajo position: fixed, kar je lahko včasih nekoliko posebno pri upodabljanju. Kadarkoli je mogoče, postavite svoj modalni HTML na položaj najvišje ravni, da se izognete morebitnim motnjam drugih elementov. .modalPri ugnezdenju znotraj drugega fiksnega elementa boste verjetno naleteli na težave .
Še enkrat, zaradi position: fixed, obstaja nekaj opozoril pri uporabi načinov na mobilnih napravah. Za podrobnosti si oglejte naše podporne dokumente za brskalnik .
Zaradi tega, kako HTML5 opredeljuje svojo semantiko, atribut autofocusHTML nima vpliva na modale Bootstrap. Če želite doseči enak učinek, uporabite JavaScript po meri:

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

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

Učinek animacije te komponente je odvisen od prefers-reduced-motionmedijske poizvedbe. Oglejte si razdelek o zmanjšanem gibanju v naši dokumentaciji o dostopnosti .

Nadaljujte z branjem za predstavitve in navodila za uporabo.

Primeri

Spodaj je primer statičnega načina (kar pomeni , da sta bila positionin displaysta bila preglasena). Vključeni so modalna glava, modalno telo (potrebno za padding) in modalna noga (neobvezno). Prosimo vas, da vključite modalne glave z dejanji opustitve, kadar koli je to mogoče, ali zagotovite drugo izrecno dejanje opustitve.

<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 v živo

Preklopite delujočo modalno predstavitev s klikom na spodnji gumb. Zdrsel bo navzdol in zbledel z vrha strani.

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

Statično ozadje

Ko je ozadje nastavljeno na statično, se modal ne bo zaprl, ko kliknete zunaj njega. Kliknite spodnji gumb, da poskusite.

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

Drsenje po dolgi vsebini

Ko modali postanejo predolgi za uporabnikovo vidno polje ali napravo, se premikajo neodvisno od same strani. Preizkusite spodnjo predstavitev, da vidite, kaj mislimo.

Ustvarite lahko tudi drsni modal, ki omogoča drsenje po telesu modala z dodajanjem .modal-dialog-scrollablev .modal-dialog.

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

Navpično sredinsko

Dodajte .modal-dialog-centeredza .modal-dialognavpično centriranje modala.

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

Namigi orodij in pojavna okna

Namige orodij in pojavna okna lahko po potrebi umestite v modale. Ko so modali zaprti, so vsi namigi orodij in pojavni elementi v njih samodejno opuščeni.

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

Uporaba mreže

Uporabite mrežni sistem Bootstrap znotraj modala z ugnezdenjem .container-fluidznotraj .modal-body. Nato uporabite običajne razrede omrežnega sistema kot kjer koli drugje.

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

Imate kup gumbov, ki sprožijo isti način z nekoliko drugačno vsebino? Uporabite atributeevent.relatedTarget in HTMLdata-bs-* za spreminjanje vsebine modala glede na to, kateri gumb je bil kliknjen.

Spodaj je predstavitev v živo, ki ji sledita primera HTML in JavaScript. Za več informacij preberite dokumente o modalnih dogodkih za podrobnosti o 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
})

Preklapljanje med načini

Preklapljajte med več modali z nekaj pametne postavitve atributov data-bs-targetin . data-bs-toggleNa primer, lahko preklopite modal za ponastavitev gesla znotraj že odprtega modala za prijavo. Upoštevajte, da več načinov ni mogoče odpreti hkrati — ta metoda preprosto preklaplja med dvema ločenima načinoma.

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

Spremeni animacijo

Spremenljivka $modal-fade-transformdoloča stanje transformacije .modal-dialogpred modalno postopoma animacijo, $modal-show-transformspremenljivka določa transformacijo .modal-dialogna koncu modalne postopoma animacije.

Če želite na primer animacijo za povečavo, lahko nastavite $modal-fade-transform: scale(.8).

Odstrani animacijo

Za modale, ki se preprosto prikažejo, namesto da bi zbledeli, odstranite .faderazred iz svoje modalne oznake.

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

Dinamične višine

Če se višina modala spremeni, medtem ko je odprt, morate poklicati myModal.handleUpdate(), da ponovno prilagodite položaj modala, če se pojavi drsni trak.

Dostopnost

Prepričajte se, da dodate aria-labelledby="...", ki se nanaša na modalni naslov, v .modal. Poleg tega lahko podate opis svojega modalnega pogovornega okna z aria-describedbyon .modal. Upoštevajte, da vam ni treba dodajati, role="dialog"saj ga že dodajamo prek JavaScripta.

Vdelava YouTube videoposnetkov

Vdelava YouTube videoposnetkov v modale zahteva dodaten JavaScript, ki ni v programu Bootstrap, za samodejno zaustavitev predvajanja in več. Za več informacij si oglejte to koristno objavo Stack Overflow .

Izbirne velikosti

Modali imajo tri izbirne velikosti, ki so na voljo prek razredov modifikatorjev, ki jih je treba postaviti na .modal-dialog. Te velikosti se začnejo pojavljati na določenih prelomnih točkah, da se izognejo vodoravnim drsnim trakom na ožjih pogledih.

Velikost	Razred	Največja modalna širina
majhna	`.modal-sm`	`300px`
Privzeto	Noben	`500px`
Velik	`.modal-lg`	`800px`
Zelo velik	`.modal-xl`	`1140px`

Naš privzeti modalni razred brez modifikatorja predstavlja modal »srednje« velikosti.

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

Druga preglasitev je možnost pojavnega modala, ki pokriva uporabniško vidno polje, ki je na voljo prek modifikatorskih razredov, ki so postavljeni na .modal-dialog.

Razred	Razpoložljivost
`.modal-fullscreen`	Nenehno
`.modal-fullscreen-sm-down`	Spodaj`576px`
`.modal-fullscreen-md-down`	Spodaj`768px`
`.modal-fullscreen-lg-down`	Spodaj`992px`
`.modal-fullscreen-xl-down`	Spodaj`1200px`
`.modal-fullscreen-xxl-down`	Spodaj`1400px`

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

Sass

Spremenljivke

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

Zanka

Odzivni celozaslonski načini se ustvarijo prek $breakpointszemljevida in zanke v 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);
      }
    }
  }
}

Uporaba

Modalni vtičnik preklaplja vašo skrito vsebino na zahtevo prek podatkovnih atributov ali JavaScripta. Prav tako preglasi privzeto vedenje drsenja in generira, .modal-backdropda zagotovi območje klika za opustitev prikazanih modal, ko kliknete zunaj modala.

Preko podatkovnih atributov

Preklopi

Aktivirajte modal brez pisanja JavaScripta. Nastavite data-bs-toggle="modal"na element krmilnika, kot je gumb, skupaj z data-bs-target="#foo"ali href="#foo"za ciljanje določenega načina za preklop.

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

Odpusti

Odpustitev je mogoče doseči z dataatributom na gumbu znotraj modala , kot je prikazano spodaj:

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

ali na gumbu zunaj modala z uporabo, data-bs-targetkot je prikazano spodaj:

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

Čeprav sta podprta oba načina za opustitev modala, ne pozabite, da se opustitev zunaj modala ne ujema z vzorcem zasnove modalnega pogovornega okna WAI-ARIA . To storite na lastno odgovornost.

Prek JavaScripta

Ustvarite modal z eno vrstico JavaScripta:

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

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-bs-, kot v data-bs-backdrop="".

Ime	Vrsta	Privzeto	Opis
`backdrop`	boolean ali niz`'static'`	`true`	Vključuje element modalne kulise. Druga možnost je, da določite `static`za ozadje, ki ob kliku ne zapre modala.
`keyboard`	logično	`true`	Zapre modal, ko pritisnete tipko za izhod
`focus`	logično	`true`	Po inicializaciji se osredotoči na modal.

Metode

Asinhrone metode in prehodi

Vse metode API so asinhrone in začnejo prehod . K klicatelju se vrnejo takoj, ko se prehod začne, vendar preden se konča . Poleg tega bo prezrt klic metode prehodne komponente .

Za več informacij si oglejte našo dokumentacijo JavaScript .

Možnosti prehoda

Aktivira vašo vsebino kot modalno. Sprejema neobvezne možnosti object.

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

preklop

Ročno preklopi modal. Vrne se klicatelju, preden je modal dejansko prikazan ali skrit (tj. preden pride do dogodka shown.bs.modalali ).hidden.bs.modal

myModal.toggle()

pokazati

Ročno odpre modal. Vrne se klicatelju, preden je modal dejansko prikazan (tj. preden shown.bs.modalpride do dogodka).

myModal.show()

Prav tako lahko posredujete element DOM kot argument, ki ga lahko prejmete v modalnih dogodkih (kot relatedTargetlastnost).

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

skriti

Ročno skrije modal. Vrne se klicatelju, preden je bil modal dejansko skrit (tj. preden hidden.bs.modalpride do dogodka).

myModal.hide()

handleUpdate

Ročno znova prilagodite položaj modala, če se višina modala spremeni, ko je odprt (tj. če se pojavi drsni trak).

myModal.handleUpdate()

odstraniti

Uniči modalnost elementa. (Odstrani shranjene podatke v elementu DOM)

myModal.dispose()

getInstance

Statična metoda, ki vam omogoča pridobitev modalne instance, povezane z elementom DOM

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

getOrCreateInstance

Statična metoda, ki vam omogoča, da pridobite modalni primerek, povezan z elementom DOM, ali ustvarite novega, če ni bil inicializiran

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

Dogodki

Modalni razred Bootstrapa izpostavlja nekaj dogodkov za priključitev na modalno funkcionalnost. Vsi modalni dogodki se sprožijo na samem modalu (tj. na <div class="modal">).

Vrsta dogodka	Opis
`show.bs.modal`	Ta dogodek se sproži takoj, ko `show`se pokliče metoda primerka. Če je vzrok klik, je kliknjeni element na voljo kot `relatedTarget`lastnost dogodka.
`shown.bs.modal`	Ta dogodek se sproži, ko je modal viden uporabniku (počakal bo, da se zaključijo prehodi CSS). Če je vzrok klik, je kliknjeni element na voljo kot `relatedTarget`lastnost dogodka.
`hide.bs.modal`	Ta dogodek se sproži takoj, ko `hide`je bila poklicana metoda primerka.
`hidden.bs.modal`	Ta dogodek se sproži, ko je modal prenehal biti skrit pred uporabnikom (počakal bo, da se zaključijo prehodi CSS).
`hidePrevented.bs.modal`	Ta dogodek se sproži, ko je prikazan modal, njegovo ozadje je `static`in se izvede klik zunaj modala ali pritisk tipke za izhod z možnostjo tipkovnice ali `data-bs-keyboard`nastavljeno na `false`.

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