Bootstrap 5 Modal

Modalo

Modal na komponente ay isang dialogo/pagkakapapalit na bintana, na ipinapakita sa itaas ng kasalukuyang pahina:

Paano gumawa ng modal

Ang halimbawa na ito ay nagpapakita kung paano gumawa ng pangkaraniwang modal:

Halimbawa

<!-- Button to open modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open modal
</button>
<!-- Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal title -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <!-- Modal body -->
      <div class="modal-body">
        Modal body ..
      </div>
      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Subukan ang Sarili

dagdag ng pagtatalikha

Paki gamitin .fade Ang klase na ito ay idagdag para magkaroon ng pagpapakita at pagbubuwag ng pagtatalikha sa pagbubukas at pagsasara ng modal:

Halimbawa

<!-- Fading modal -->
<div class="modal fade"></div>
<!-- Modal without animation -->
<div class="modal"></div>

Subukan ang Sarili

Laki ng Modal

sa pamamagitan ng pagdagdag sa maliit na modal .modal-sm klase (max-width 300px), dagdag ng malaking modal .modal-lg klase (max-width 800px) o dagdag ng malaking modal .modal-xl upang baguhin ang laki ng modal (max-width 1140 pixel). Ang default na pinakamalaking laki ay 500 pixel.

Paki dagdag .modal-dialog Idagdag ang klase at laki ng klase sa <div> Elemento:

Maliit na Modal

<div class="modal-dialog modal-sm">

Subukan ang Sarili

Malaking Modal

<div class="modal-dialog modal-lg">

Subukan ang Sarili

Extra Large Modal

<div class="modal-dialog modal-xl">

Subukan ang Sarili

Bilang karaniwan, ang laki ng modal ay "medium" (500px na pinakamataas na lapad).

Fullscreen Modal

Kung gusto mong ipagpaliban ng modal ang buong lapad at taas ng pahina, gamitin: .modal-fullscreen Klase:

Halimbawa

<div class="modal-dialog modal-fullscreen">

Subukan ang Sarili

Responsive Fullscreen Modal

Maaari mo ring gamitin .modal-fullscreen-*-* Klase na nagkontrol kung kailan ang modal ay dapat ipakita nang buong ekrano:

Klase Paglalarawan Halimbawa
.modal-fullscreen-sm-down Bilang 576px sa ibaba na buong ekrano Subukan ang Sarili
.modal-fullscreen-md-down Bilang 768px sa ibaba na buong ekrano Subukan ang Sarili
.modal-fullscreen-lg-down Bilang 992px sa ibaba na buong ekrano Subukan ang Sarili
.modal-fullscreen-xl-down Bilang 1200px sa ibaba na buong ekrano Subukan ang Sarili
.modal-fullscreen-xxl-down Bilang 1400px sa ibaba na buong ekrano Subukan ang Sarili

Centered Modal

Sa pamamagitan ng paggamit ng .modal-dialog-centric Klase, na nag-aayos ng vertical at horizontal na sentro ng modal sa loob ng pahina:

Halimbawa

<div class="modal-dialog modal-dialog-centered">

Subukan ang Sarili

Scrolling Modal

Kapag may maraming nilalaman sa modal, magdadagdag ng isang scrollbar sa pahina. Tingnan ang sumusunod na halimbawa upang maunawaan:

Halimbawa

<div class="modal-dialog">

Subukan ang Sarili

Ngunit, sa pamamagitan ng paglagay ng .modal-dialog-scrollable Dagdag sa .modal-dialog Maaaring mag-scroll lamang sa loob ng modal, hindi sa pahina mismo:

Halimbawa

<div class="modal-dialog modal-dialog-scrollable">

Subukan ang Sarili