Source

Modaalinen

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

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ä:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

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" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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-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-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</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.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Pystysuoraan keskitetty

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</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-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 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-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>

Vaihteleva modaalinen sisältö

Onko sinulla joukko painikkeita, jotka kaikki laukaisevat saman modaalin hieman erilaisella sisällöllä? Käytä event.relatedTargetja HTML - data-*attribuutteja (mahdollisesti jQueryn kautta ) 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-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <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-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

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" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Dynaamiset korkeudet

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

Esteettömyys

Muista lisätä role="dialog"ja aria-labelledby="...", viitaten modaalinimikkeeseen, osoitteeseen .modalja role="document"itseensä .modal-dialog. Lisäksi voit antaa kuvauksen modaalisesta dialogistasi aria-describedbypäällä .modal.

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 kaksi valinnaista kokoa, jotka ovat saatavilla modifiointiluokkien kautta sijoitettaviksi .modal-dialog. Nämä koot alkavat tietyissä keskeytyspisteissä välttää vaakasuuntaiset vierityspalkit kapeammissa kuvaporteissa.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Käyttö

Modaalilaajennus vaihtaa piilotetun sisällön tarpeen mukaan tietomääritteiden tai JavaScriptin avulla. Se myös lisää .modal-openoletusarvoisen <body>vierityskäyttäytymisen ohittamiseen ja luo .modal-backdropnapsautusalueen, joka hylkää näytetyt modaalit, kun klikkaat modaalin ulkopuolella.

Tietomääritteiden kautta

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

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

JavaScriptin kautta

Kutsu modaali tunnuksella myModalyhdellä JavaScript-rivillä:

$('#myModal').modal(options)

Vaihtoehdot

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

Nimi Tyyppi Oletus Kuvaus
taustalla boolean tai merkkijono'static' totta Sisältää modaalitaustaelementin. Vaihtoehtoisesti voit määrittää statictaustalle, joka ei sulje modaalia napsautettaessa.
näppäimistö boolean totta Sulkee modaalin, kun Esc-näppäintä painetaan
keskittyä boolean totta Keskittää modaaliin alustuksen yhteydessä.
näytä boolean totta Näyttää modaalin 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.

.modal(options)

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

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

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

$('#myModal').modal('toggle')

.modal('show')

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

$('#myModal').modal('show')

.modal('hide')

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

$('#myModal').modal('hide')

.modal('handleUpdate')

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

$('#myModal').modal('handleUpdate')

.modal('dispose')

Tuhoaa elementin modaalin.

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 showinstanssimenetelmää kutsutaan. Jos se johtuu napsautuksesta, napsautettu elementti on käytettävissä relatedTargettapahtuman ominaisuutena.
näytetään.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ä relatedTargettapahtuman ominaisuutena.
hide.bs.modal Tämä tapahtuma käynnistyy välittömästi, kun hideinstanssimenetelmää on kutsuttu.
piilotettu.bs.modal Tämä tapahtuma käynnistyy, kun modaali on piilotettu käyttäjältä (odottaa CSS-siirtymien valmistumista). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})