Source

Modalni

Upotrijebite Bootstrapov JavaScript modalni dodatak za dodavanje dijaloških okvira na svoje web mjesto za okvire za pregled, korisničke obavijesti ili potpuno prilagođeni sadržaj.

Kako radi

Prije nego što započnete s modalnom komponentom Bootstrapa, svakako pročitajte sljedeće jer su se naše opcije izbornika nedavno promijenile.

  • Modali su izgrađeni pomoću HTML-a, CSS-a i JavaScripta. Postavljeni su iznad svega ostalog u dokumentu i uklanjaju pomicanje iz<body> tako da se umjesto toga pomiče modalni sadržaj.
  • Klikom na modalnu "pozadinu" automatski će se zatvoriti modal.
  • Bootstrap podržava samo jedan modalni prozor odjednom. Ugniježđeni modali nisu podržani jer vjerujemo da stvaraju loše korisničko iskustvo.
  • Modali koriste position: fixed, što ponekad može biti malo specifično u pogledu prikazivanja. Kad god je to moguće, postavite svoj modalni HTML na poziciju najviše razine kako biste izbjegli moguće smetnje drugih elemenata. Vjerojatno ćete naići na probleme prilikom ugniježđivanja .modalunutar drugog fiksnog elementa.
  • Još jednom, zbog position: fixed, postoje neka upozorenja u vezi s upotrebom modala na mobilnim uređajima. Pogledajte našu dokumentaciju za podršku preglednika za detalje.
  • Zbog načina na koji HTML5 definira svoju semantiku, HTML autofocusatribut nema učinka u Bootstrap modalima. Da biste postigli isti učinak, upotrijebite prilagođeni JavaScript:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Nastavite čitati za demonstracije i smjernice za korištenje.

Primjeri

Ispod je statički modalni primjer (što znači da su positioni displaynadjačani). Uključeno je modalno zaglavlje, modalno tijelo (potrebno za padding) i modalno podnožje (neobavezno). Tražimo da uključite modalna zaglavlja s radnjama odbacivanja kad god je to moguće ili navedite drugu izričitu radnju odbacivanja.

<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-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Demo uživo

Uključite modalnu demonstraciju koja radi klikom na gumb ispod. Kliznit će prema dolje i izblijedjeti s vrha stranice.

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

Pomicanje dugog sadržaja

Kada modali postanu predugi za korisnikov okvir za prikaz ili uređaj, oni se pomiču neovisno o samoj stranici. Isprobajte demo u nastavku da vidite na što 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>

Okomito centrirano

Dodajte .modal-dialog-centeredza .modal-dialogokomito 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="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>

Opisi i skočni prozori

Opisi alata i skočni prozori mogu se po potrebi postaviti unutar modala. Kada se modali zatvore, svi opisi alata i skočni prozori unutar njih također se automatski odbacuju.

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

Korištenje mreže

Iskoristite Bootstrap grid sustav unutar modala ugniježđujući .container-fluidse unutar .modal-body. Zatim upotrijebite normalne klase mrežnog sustava kao što biste to radili bilo gdje drugdje.

<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čiti modalni sadržaji

Imate hrpu gumba koji svi pokreću isti modal s malo drugačijim sadržajem? Upotrijebite HTML atributeevent.relatedTarget i (moguće putem jQueryja ) za mijenjanje sadržaja modala ovisno o tome koji je gumb kliknut.data-*

Ispod je demonstracija uživo praćena primjerima HTML-a i JavaScripta. Za više informacija pročitajte dokumentaciju o modalnim događajima za detalje 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)
})

Ukloni animaciju

Za modale koji se jednostavno pojavljuju umjesto da blijede u prikazu, uklonite .fadeklasu iz svoje modalne oznake.

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

Dinamičke visine

Ako se visina modala promijeni dok je otvoren, trebali biste pozvati $('#myModal').modal('handleUpdate')da ponovno prilagodite položaj modala u slučaju da se pojavi traka za pomicanje.

Pristupačnost

Obavezno dodajte role="dialog"i aria-labelledby="...", pozivajući se na modalni naslov, na .modali role="document"na samoga .modal-dialogsebe. Osim toga, možete dati opis svog modalnog dijaloga s aria-describedbyna .modal.

Ugradnja YouTube videa

Ugrađivanje YouTube videozapisa u modale zahtijeva dodatni JavaScript koji nije u Bootstrapu za automatsko zaustavljanje reprodukcije i više. Pogledajte ovaj korisni post Stack OverflowaZa više informacija

Izborne veličine

Modali imaju dvije izborne veličine, dostupne putem modifikatorskih klasa koje se postavljaju na .modal-dialog. Ove se veličine pojavljuju na određenim prijelomnim točkama kako bi se izbjegle horizontalne trake za pomicanje na užim prozorima.

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

Korištenje

Modalni dodatak prebacuje vaš skriveni sadržaj na zahtjev, putem atributa podataka ili JavaScripta. Također dodaje .modal-openza <body>nadjačavanje zadanog ponašanja pomicanja i generira .modal-backdropza pružanje područja klika za odbacivanje prikazanih modala kada se klikne izvan modala.

Preko atributa podataka

Aktivirajte modal bez pisanja JavaScripta. Postavite data-toggle="modal"na upravljački element, poput gumba, zajedno s data-target="#foo"ilihref="#foo" za ciljanje određenog modala za prebacivanje.

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

Preko JavaScripta

Pozovite modal s ID -om myModals jednim redom JavaScripta:

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

Mogućnosti

Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. Za atribute podataka dodajte naziv opcije u data-, kao u data-backdrop="".

Ime Tip Zadano Opis
pozadina booleov ili niz'static' pravi Uključuje element modalne pozadine. Alternativno, navedite staticza pozadinu koja ne zatvara modal na klik.
tipkovnica Booleov pravi Zatvara modal kada se pritisne tipka za izlaz
usredotočenost Booleov pravi Stavlja fokus na modal kada se inicijalizira.
pokazati Booleov pravi Prikazuje modal kada se inicijalizira.

Metode

Asinkrone metode i prijelazi

Sve API metode su asinkrone i pokreću prijelaz . Vraćaju se pozivatelju čim prijelaz započne, ali prije nego što završi . Osim toga, poziv metode na prijelaznoj komponenti bit će zanemaren .

Pogledajte našu JavaScript dokumentaciju za više informacija.

.modal(options)

Aktivira vaš sadržaj kao modal. Prihvaća izborne opcije object.

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

.modal('toggle')

Ručno mijenja modal. Vraća se pozivatelju prije nego što se modal stvarno prikaže ili sakrije (tj. prije nego što se dogodi događaj shown.bs.modalili ).hidden.bs.modal

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

.modal('show')

Ručno otvara modal. Vraća se pozivatelju prije nego što se modal stvarno prikaže (tj. prije nego što se shown.bs.modaldogađaj dogodi).

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

.modal('hide')

Ručno skriva modal. Vraća se pozivatelju prije nego što je modal zapravo skriven (tj. prijehidden.bs.modal događaj dogodi).

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

.modal('handleUpdate')

Ručno ponovno prilagodite položaj modala ako se visina modala promijeni dok je otvoren (tj. u slučaju da se pojavi traka za pomicanje).

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

.modal('dispose')

Uništava modal elementa.

Događaji

Bootstrapova modalna klasa izlaže nekoliko događaja za spajanje na modalnu funkcionalnost. Svi modalni događaji pokreću se na samom modalu (tj. na <div class="modal">).

Vrsta događaja Opis
pokazati.bs.modalni Ovaj događaj aktivira se odmah kada showse pozove metoda instance. Ako je uzrokovan klikom, kliknuti element dostupan je kao relatedTargetsvojstvo događaja.
prikazano.bs.modalno Ovaj se događaj pokreće kada je modal postao vidljiv korisniku (pričekat će da se CSS prijelazi završe). Ako je uzrokovan klikom, kliknuti element dostupan je kao relatedTargetsvojstvo događaja.
sakriti.bs.modalan Ovaj se događaj aktivira odmah nakon hidepozivanja metode instance.
skriven.bs.modalan Ovaj se događaj pokreće kada se modal više ne skriva od korisnika (pričekat će da se CSS prijelazi završe). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})