Source

Modalno

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

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

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

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-toggle="modal" data-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">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">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.

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

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

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

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">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>

Navpično sredinsko

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

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

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

Različna modalna vsebina

Imate kup gumbov, ki sprožijo isti način z nekoliko drugačno vsebino? Uporabite atributeevent.relatedTarget in HTMLdata-* (po možnosti prek jQuery ), da spremenite vsebino 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-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)
})

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

Dinamične višine

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

Dostopnost

Prepričajte se, da ste dodali role="dialog"in aria-labelledby="...", ki se sklicuje na modalni naslov, k .modalin role="document"k .modal-dialogsamemu. Poleg tega lahko podate opis svojega modalnega pogovornega okna z aria-describedbyon .modal.

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.

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

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

<!-- 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" role="document">
    <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" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Uporaba

Modalni vtičnik preklaplja vašo skrito vsebino na zahtevo prek podatkovnih atributov ali JavaScripta. Doda .modal-opentudi <body>k preglasitvi privzetega vedenja drsenja in ustvari .modal-backdropobmočje za klikanje za opustitev prikazanih modal, ko kliknete zunaj modala.

Preko podatkovnih atributov

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

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

Prek JavaScripta

Pokličite modal z ID -jem myModalz eno vrstico JavaScripta:

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

Opcije

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

Ime Vrsta Privzeto Opis
ozadje boolean ali niz'static' prav Vključuje element modalne kulise. Druga možnost je, da določite staticza ozadje, ki ne zapre modala ob kliku ali pritisku tipke za izhod.
tipkovnico logično prav Zapre modal, ko pritisnete tipko za izhod
fokus logično prav Po inicializaciji se osredotoči na modal.
pokazati logično prav Pri inicializaciji prikaže 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 .

.modal(options)

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

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

.modal('toggle')

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').modal('toggle')

.modal('show')

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

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

.modal('hide')

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

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

.modal('handleUpdate')

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

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

.modal('dispose')

Uniči modalnost elementa.

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 showse pokliče metoda primerka. Če je vzrok klik, je kliknjeni element na voljo kot relatedTargetlastnost dogodka.
prikazano.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 relatedTargetlastnost dogodka.
hide.bs.modal Ta dogodek se sproži takoj, ko hideje bila poklicana metoda primerka.
skrito.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, je njegovo ozadje staticin se izvede klik zunaj modala ali pritisk tipke za izhod. 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})