Modaalinen

Käytä Bootstrapin JavaScript-modaalilaajennusta lisätäksesi sivustollesi valintaikkunoita lightboxeja, käyttäjäilmoituksia tai täysin mukautettua sisältöä varten.

Tällä sivulla

Kuinka se toimii

Ennen kuin aloitat Bootstrapin modaalikomponentin käytön, muista lukea seuraava, koska valikkovaihtoehdot ovat äskettäin muuttuneet.

Modaalit on rakennettu HTML:llä, CSS:llä ja JavaScriptillä. Ne sijoitetaan kaiken muun asiakirjan päälle ja poistavat vierityksen, <body>jotta modaalinen sisältö vierii sen sijaan.
Modaalin "tausta" napsauttaminen sulkee modaalin automaattisesti.
Bootstrap tukee vain yhtä modaaliikkunaa kerrallaan. Sisäkkäisiä modaaleja ei tueta, koska uskomme niiden olevan huonoja käyttökokemuksia.
Modaalit käyttävät position: fixed, mikä voi joskus olla hieman erityistä sen renderöinnin suhteen. Aina kun mahdollista, sijoita modaalinen HTML-koodisi ylimmälle tasolle välttääksesi muiden elementtien mahdolliset häiriöt. Saatat todennäköisesti törmätä ongelmiin, kun asetat .modaltoisen kiinteän elementin sisään.
Jälleen kerran, johtuen position: fixedmodaalien käytöstä mobiililaitteissa on joitain varoituksia. Katso lisätietoja selaimen tukidokumenteistamme .
Koska HTML5 määrittelee semantiikkansa, HTML- autofocusattribuutilla ei ole vaikutusta Bootstrap-modaaleihin. Saat saman vaikutuksen käyttämällä mukautettua JavaScriptiä:

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

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

Tämän komponentin animaatiovaikutus riippuu prefers-reduced-motionmediakyselystä. Katso esteettömyysdokumentaation osio liikkeen vähentämisestä .

Jatka lukemista saadaksesi esittelyt ja käyttöohjeet.

Esimerkkejä

Alla on staattinen modaalinen esimerkki (tarkoittaa sen positionja displayon ohitettu). Mukana ovat modaalinen ylätunniste, modaalinen runko (pakollinen padding) ja modaalinen alatunniste (valinnainen). Pyydämme lisäämään modaalisia otsikoita hylkäystoimintoihin aina kun mahdollista, tai tarjoamaan toisen nimenomaisen hylkäystoiminnon.

<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

Vaihda toimiva modaalidemo napsauttamalla alla olevaa painiketta. Se liukuu alas ja häivyttää sivun yläreunasta.

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

Staattinen tausta

Kun tausta on staattinen, modaali ei sulkeudu, kun sitä napsautetaan sen ulkopuolella. Napsauta alla olevaa painiketta kokeillaksesi sitä.

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

Pitkän sisällön vierittäminen

Kun modaalit tulevat liian pitkiksi käyttäjän näkymään tai laitteelle, ne rullaavat itse sivusta riippumatta. Kokeile alla olevaa demoa nähdäksesi, mitä tarkoitamme.

Voit myös luoda vieritettävän modaalin, jonka avulla voit vierittää modaalirunkoa lisäämällä .modal-dialog-scrollablesiihen .modal-dialog.

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

Pystysuoraan keskitetty

Lisää modaalin .modal-dialog-centeredkeskittämiseksi .modal-dialogpystysuoraan.

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

Työkaluvinkit ja ponnahdusikkunat

Työkaluvihjeitä ja ponnahdusikkunoita voidaan sijoittaa modaaleihin tarpeen mukaan . Kun modaalit suljetaan, myös kaikki työkaluvinkit ja ponnahdusikkunat hylätään automaattisesti.

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

Ristikon käyttäminen

Hyödynnä Bootstrap-ruudukkojärjestelmää modaalissa sijoittamalla .container-fluidsisään .modal-body. Käytä sitten normaaleja ruudukkojärjestelmäluokkia kuten missä tahansa muuallakin.

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

Onko sinulla joukko painikkeita, jotka kaikki laukaisevat saman modaalin hieman erilaisella sisällöllä? Käytä event.relatedTargetja HTML - data-bs-*attribuutteja muuttaaksesi modaalin sisältöä sen mukaan, mitä painiketta napsautettiin.

Alla on live-demo, jota seuraa esimerkki HTML:stä ja JavaScriptistä. Saat lisätietoja lukemalla modaalitapahtumien asiakirjoja 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
})

Vaihda modaalien välillä

Vaihda useiden modaalien välillä käyttämällä attribuuttien data-bs-targetja näppärää sijoittelua data-bs-toggle. Voit esimerkiksi vaihtaa salasanan palautusmodaalin jo avoimesta sisäänkirjautumismodaalista. Huomaa, että useita modaaleja ei voi avata samanaikaisesti – tämä menetelmä yksinkertaisesti vaihtaa kahden erillisen modaalin välillä.

Avaa ensimmäinen modaali

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

Vaihda animaatiota

Muuttuja $modal-fade-transformmäärittää muunnostilan .modal-dialogennen modaalista häivytysanimaatiota, $modal-show-transformmuuttuja määrittää muunnoksen .modal-dialogmodaalisen häivytysanimaatioon lopussa.

Jos haluat esimerkiksi zoomausanimaatiota, voit asettaa $modal-fade-transform: scale(.8).

Poista animaatio

Jos modaalit vain näkyvät sen sijaan, että ne katoavat näkyvistä, poista .fadeluokka modaalimerkinnöistäsi.

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

Dynaamiset korkeudet

Jos modaalin korkeus muuttuu sen ollessa auki, sinun tulee soittaa myModal.handleUpdate()ja säätää modaalin sijainti uudelleen, jos vierityspalkki tulee näkyviin.

Esteettömyys

Muista lisätä aria-labelledby="..."modaalinimikkeeseen viitaten .modal. Lisäksi voit antaa kuvauksen modaalisesta dialogistasi aria-describedbypäällä .modal. Huomaa, että sinun ei tarvitse lisätä, role="dialog"koska lisäämme sen jo JavaScriptin kautta.

YouTube-videoiden upottaminen

YouTube-videoiden upottaminen modaaleihin vaatii ylimääräisen JavaScriptin (ei Bootstrapissa), jotta toisto pysähtyy automaattisesti ja paljon muuta. Katso tästä hyödyllisestä Stack Overflow -viestistä lisätietoja.

Valinnaiset koot

Modaaleilla on kolme valinnaista kokoa, jotka ovat saatavilla modifiointiluokkien kautta sijoitettaviksi .modal-dialog. Nämä koot alkavat tietyissä keskeytyspisteissä välttää vaakasuuntaiset vierityspalkit kapeammissa kuvaporteissa.

Koko	Luokka	Modaalinen maksimileveys
Pieni	`.modal-sm`	`300px`
Oletus	Ei mitään	`500px`
Suuri	`.modal-lg`	`800px`
XL	`.modal-xl`	`1140px`

Oletusmodaalimme ilman modifikaatioita muodostaa "keskikokoisen" modaalin.

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

Toinen ohitus on mahdollisuus ponnahtaa esiin modaali, joka peittää käyttäjän näkymän, ja se on käytettävissä .modal-dialog.

Luokka	Saatavuus
`.modal-fullscreen`	Aina
`.modal-fullscreen-sm-down`	Alla`576px`
`.modal-fullscreen-md-down`	Alla`768px`
`.modal-fullscreen-lg-down`	Alla`992px`
`.modal-fullscreen-xl-down`	Alla`1200px`
`.modal-fullscreen-xxl-down`	Alla`1400px`

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

Sass

Muuttujat

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

Silmukka

Responsiiviset koko näytön modaalit luodaan $breakpointskartan ja silmukan kautta 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);
      }
    }
  }
}

Käyttö

Modaalilaajennus vaihtaa piilotetun sisällön tarpeen mukaan tietomääritteiden tai JavaScriptin avulla. Se myös ohittaa oletusarvoisen vierityskäyttäytymisen ja luo .modal-backdropnapsautusalueen, joka hylkää näytetyt modaalit, kun napsautetaan modaalin ulkopuolella.

Tietomääritteiden kautta

Aktivoi modaali kirjoittamatta JavaScriptiä. Aseta data-bs-toggle="modal"ohjainelementille, kuten painikkeelle, yhdessä data-bs-target="#foo"tai href="#foo"kohdistaaksesi tiettyyn modaaliin vaihtaaksesi.

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

JavaScriptin kautta

Luo modaali yhdellä JavaScript-rivillä:

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

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-bs-, kuten kohdassa data-bs-backdrop="".

Nimi	Tyyppi	Oletus	Kuvaus
`backdrop`	boolean tai merkkijono`'static'`	`true`	Sisältää modaalitaustaelementin. Vaihtoehtoisesti voit määrittää `static`taustalle, joka ei sulje modaalia napsautettaessa.
`keyboard`	boolean	`true`	Sulkee modaalin, kun Esc-näppäintä painetaan
`focus`	boolean	`true`	Keskittää modaaliin alustuksen yhteydessä.

menetelmät

Asynkroniset menetelmät ja siirtymät

Kaikki API - menetelmät ovat asynkronisia ja aloittavat siirtymän . He palaavat soittajan luo heti siirtymisen alkaessa, mutta ennen sen päättymistä . Lisäksi siirtyvän komponentin menetelmäkutsu jätetään huomioimatta .

Katso lisätietoja JavaScript - dokumentaatiostamme .

Ohitusvaihtoehdot

Aktivoi sisältösi modaalina. Hyväksyy valinnaiset vaihtoehdot object.

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

vaihtaa

Vaihtaa modaalin manuaalisesti. Palaa soittajalle ennen kuin modaali on todellisuudessa näytetty tai piilotettu (ts. ennen kuin shown.bs.modaltapahtuma hidden.bs.modaltapahtuu).

myModal.toggle()

näytä

Avaa modaalin manuaalisesti. Palaa soittajalle ennen kuin modaali on todellisuudessa esitetty (eli ennen shown.bs.modaltapahtumaa).

myModal.show()

Voit myös välittää DOM-elementin argumenttina, joka voidaan vastaanottaa modaalitapahtumissa ( relatedTargetominaisuutena).

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

piilottaa

Piilottaa modaalin manuaalisesti. Palaa soittajalle ennen kuin modaali on todella piilotettu (ts. ennen hidden.bs.modaltapahtuman tapahtumista).

myModal.hide()

käsittele Päivitä

Säädä modaalin asentoa manuaalisesti uudelleen, jos modaalin korkeus muuttuu sen ollessa auki (eli jos vierityspalkki tulee näkyviin).

myModal.handleUpdate()

hävittää

Tuhoaa elementin modaalin. (Poistaa DOM-elementtiin tallennetut tiedot)

myModal.dispose()

getInstance

Staattinen menetelmä, jonka avulla voit saada DOM-elementtiin liittyvän modaalin esiintymän

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

getOrCreateInstance

Staattinen menetelmä, jonka avulla voit saada DOM-elementtiin liittyvän modaalin esiintymän tai luoda uuden, jos sitä ei alustettu

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

Tapahtumat

Bootstrapin modaaliluokka paljastaa muutamia tapahtumia modaalitoimintoihin kytkeytymistä varten. Kaikki modaalitapahtumat laukaistaan itse modaaliin (eli kohtaan <div class="modal">).

Tapahtumatyyppi	Kuvaus
`show.bs.modal`	Tämä tapahtuma käynnistyy välittömästi, kun `show`instanssimenetelmää kutsutaan. Jos se johtuu napsautuksesta, napsautettu elementti on käytettävissä `relatedTarget`tapahtuman ominaisuutena.
`shown.bs.modal`	Tämä tapahtuma käynnistyy, kun modaali on asetettu käyttäjän näkyväksi (odottaa CSS-siirtymien valmistumista). Jos se johtuu napsautuksesta, napsautettu elementti on käytettävissä `relatedTarget`tapahtuman ominaisuutena.
`hide.bs.modal`	Tämä tapahtuma käynnistyy välittömästi, kun `hide`instanssimenetelmää on kutsuttu.
`hidden.bs.modal`	Tämä tapahtuma käynnistyy, kun modaali on piilotettu käyttäjältä (odottaa CSS-siirtymien valmistumista).
`hidePrevented.bs.modal`	Tämä tapahtuma käynnistyy, kun modaali näytetään, sen tausta on `static`ja napsautus modaalin ulkopuolella tai estonäppäintä painetaan näppäimistön valinnalla tai `data-bs-keyboard`arvolla `false`.

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