in English

Modal

Használja a Bootstrap JavaScript modális beépülő modulját, hogy párbeszédpaneleket adjon webhelyéhez átvilágítódobozok, felhasználói értesítések vagy teljesen egyéni tartalom megjelenítéséhez.

Hogyan működik

Mielőtt hozzákezdene a Bootstrap modális összetevőjéhez, feltétlenül olvassa el a következőket, mivel menüopcióink nemrégiben megváltoztak.

A modálok HTML, CSS és JavaScript segítségével épülnek fel. Ezek a dokumentumban minden más fölé helyezkednek el, és eltávolítják a görgetést, <body>így a modális tartalom görgethet helyette.
A modális „háttér”-re kattintva a modális automatikusan bezárul.
A Bootstrap egyszerre csak egy modális ablakot támogat. A beágyazott modálisok nem támogatottak, mivel véleményünk szerint rossz felhasználói élményt jelentenek.
A modálisok a -t használják position: fixed, ami néha egy kicsit sajátos lehet a megjelenítést illetően. Amikor csak lehetséges, helyezze el a modális HTML-kódot a legfelső szintű pozícióba, hogy elkerülje az egyéb elemek esetleges interferenciáját. Valószínűleg problémákba ütközik, ha egy .modalmásik rögzített elembe ágyaz be egyet.
Ismételten a(z) miatt position: fixedvan néhány figyelmeztetés a modálok mobileszközökön történő használatával kapcsolatban. A részletekért tekintse meg a böngésző támogatási dokumentumait .
A HTML5 szemantikája meghatározása miatt a autofocusHTML attribútumnak nincs hatása a Bootstrap modálisra. Ugyanezen hatás eléréséhez használjon néhány egyéni JavaScriptet:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Ennek az összetevőnek az animációs hatása a médialekérdezéstől függ prefers-reduced-motion. Tekintse meg akadálymentesítési dokumentációnk csökkentett mozgással foglalkozó részét .

Olvassa tovább a bemutatókat és a használati útmutatókat.

Példák

Az alábbiakban egy statikus modális példa látható (ami azt jelenti, hogy a positionés displayfelül lett írva). Tartalmazza a modális fejlécet, a modális törzset (szükséges a padding-hoz) és a modális láblécet (opcionális). Kérjük, hogy lehetőség szerint adjon meg modális fejlécet az elvetési műveletekkel, vagy adjon meg egy másik kifejezett elvetési műveletet.

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

Élő demó

Az alábbi gombra kattintva válthat egy működő modális bemutatót. Lecsúszik, és elhalványul az oldal tetejétől.

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

Statikus háttér

Ha a háttér statikusra van állítva, a modál nem zár be, ha kívülre kattint. Kattintson az alábbi gombra a kipróbáláshoz.

<!-- 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" data-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="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>

Hosszú tartalom görgetése

Ha a modálisok túl hosszúak lesznek a felhasználó nézetablakához vagy eszközéhez, magától az oldaltól függetlenül görgetnek. Próbálja ki az alábbi bemutatót, hogy lássa, mire gondolunk.