in English

Modal

Gunakake plugin modal JavaScript Bootstrap kanggo nambah dialog menyang situs sampeyan kanggo kothak lampu, kabar pangguna, utawa konten khusus.

Ing kaca iki

Cara kerjane

Sadurunge miwiti komponen modal Bootstrap, priksa manawa maca ing ngisor iki amarga pilihan menu kita bubar diganti.

Modal dibangun nganggo HTML, CSS, lan JavaScript. Lagi dipanggonke liwat kabeh liya ing document lan mbusak gulung saka <body>supaya isi modal nggulung tinimbang.
Ngeklik ing "latar mburi" modal bakal kanthi otomatis nutup modal.
Bootstrap mung ndhukung siji jendhela modal ing siji wektu. Modal bersarang ora didhukung amarga kita percaya yen pengalaman pangguna sing ala.
Modals nggunakake position: fixed, kang kadhangkala bisa dadi dicokot tartamtu bab sawijining rendering. Yen bisa, selehake HTML modal sampeyan ing posisi paling dhuwur supaya ora ana gangguan saka unsur liyane. Sampeyan kamungkinan bakal nemu masalah nalika nesting .modaling unsur tetep liyane.
Sawise maneh, amarga position: fixed, ana sawetara caveats karo nggunakake modal ing piranti seluler. Deleng dokumen dhukungan browser kita kanggo rincian.
Amarga carane HTML5 nemtokake semantik, atribut autofocusHTML ora duwe pengaruh ing modals Bootstrap. Kanggo entuk efek sing padha, gunakake sawetara JavaScript khusus:

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})

Efek animasi saka komponen iki gumantung marang prefers-reduced-motionpitakon media. Deleng bagean gerakan suda saka dokumentasi aksesibilitas kita .

Tansah maca kanggo demo lan pedoman panggunaan.

Tuladha

Ing ngisor iki minangka conto modal statisposition (tegese lan displaywis diganti). Kalebu header modal, awak modal (dibutuhake kanggo padding), lan footer modal (opsional). Dijaluk supaya sampeyan nyakup header modal kanthi tumindak ngilangi yen bisa, utawa menehi tumindak ngilangi eksplisit liyane.

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

demo langsung

Ganti demo modal kerja kanthi ngeklik tombol ing ngisor iki. Bakal geser mudhun lan luntur saka ndhuwur kaca.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Latar mburi statis

Nalika latar mburi disetel kanggo statis, modal ora bakal nutup nalika ngeklik njaba. Klik tombol ing ngisor iki kanggo nyoba.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

Nggulung isi dawa

Nalika modals dadi dawa banget kanggo viewport pangguna utawa piranti, padha nggulung dhewe saka kaca dhewe. Coba demo ing ngisor iki kanggo ndeleng apa tegese.

Sampeyan uga bisa nggawe modal sing bisa digulung sing ngidini nggulung awak modal kanthi .modal-dialog-scrollablenambahake .modal-dialog.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Vertikal tengah

Tambah .modal-dialog-centeredmenyang .modal-dialogvertikal tengah modal.

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</div>

Tooltips lan popovers

Tooltips lan popovers bisa diselehake ing modals yen perlu. Nalika modal ditutup, sembarang tooltips lan popovers ing uga otomatis mecat.

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

Nggunakake kothak

Gunakake sistem kothak Bootstrap ing modal kanthi nesting .container-fluiding .modal-body. Banjur, gunakake kelas sistem kothak normal kaya ing ngendi wae.

<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 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-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>

Duwe akeh tombol sing kabeh micu modal sing padha karo isi sing rada beda? Gunakake event.relatedTargetlan atribut HTMLdata-bs-* kanggo macem-macem isi modal gumantung tombol sing diklik.

Ing ngisor iki ana demo langsung sing diikuti conto HTML lan JavaScript. Kanggo informasi luwih lengkap, waca docs acara modal kanggo rincian ing relatedTarget.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<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">New message</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <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-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

Ngalih ing antarane modal

Ngalih ing antarane macem-macem modal kanthi sawetara penempatan sing pinter data-bs-targetlan data-bs-toggleatribut. Contone, sampeyan bisa ngalih modal ngreset tembung sandhi saka modal mlebu sing wis mbukak. Wigati dimangerteni manawa macem-macem modal ora bisa dibukak bebarengan - cara iki mung ganti ing antarane rong modal sing kapisah.

Bukak modal pisanan

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

Ngganti animasi

Variabel $modal-fade-transformnemtokake kahanan transformasi .modal-dialogsadurunge animasi fade-in modal, $modal-show-transformvariabel nemtokake transformasi .modal-dialoging pungkasan animasi fade-in modal.

Yen sampeyan pengin contone animasi zoom-in, sampeyan bisa nyetel $modal-fade-transform: scale(.8).

Mbusak animasi

Kanggo modals sing mung katon tinimbang fade kanggo ndeleng, mbusak .fadekelas saka markup modal.

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

Dhuwur dinamis

Yen dhuwur saka modal diganti nalika mbukak, sampeyan kudu nelpon myModal.handleUpdate()kanggo nyetel maneh posisi modal ing kasus scrollbar katon.

Aksesibilitas

Dadi manawa kanggo nambah aria-labelledby="...", referensi judhul modal, kanggo .modal. Kajaba iku, sampeyan bisa menehi katrangan babagan dialog modal karo aria-describedbyon .modal. Elinga yen sampeyan ora perlu nambah role="dialog"amarga kita wis nambah liwat JavaScript.

Semat video YouTube

Semat video YouTube ing modals mbutuhake JavaScript tambahan ora ing Bootstrap kanggo otomatis mungkasi muter maneh lan liyane. Deleng kiriman Stack Overflow sing migunani iki kanggo informasi luwih lengkap.

Ukuran opsional

Modal duwe telung ukuran opsional, kasedhiya liwat kelas modifier kanggo diselehake ing a .modal-dialog. Ukuran kasebut diwiwiti ing breakpoints tartamtu kanggo ngindhari scrollbar horisontal ing viewports sing luwih sempit.

Ukuran	kelas	Modal max-jembaré
Cilik	`.modal-sm`	`300px`
Default	ora ana	`500px`
Gedhe	`.modal-lg`	`800px`
Ekstra gedhe	`.modal-xl`	`1140px`

Modal standar kita tanpa kelas modifier minangka modal ukuran "sedheng".

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

Liyane override pilihan kanggo pop munggah modal sing isine viewport pangguna, kasedhiya liwat kelas modifier sing diselehake ing .modal-dialog.

kelas	kasedhiyan
`.modal-fullscreen`	tansah
`.modal-fullscreen-sm-down`	Ngisor`576px`
`.modal-fullscreen-md-down`	Ngisor`768px`
`.modal-fullscreen-lg-down`	Ngisor`992px`
`.modal-fullscreen-xl-down`	Ngisor`1200px`
`.modal-fullscreen-xxl-down`	Ngisor`1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

Sass

Variabel

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        rgba($black, .2);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

Loop

Modalitas layar wutuh responsif digawe liwat $breakpointspeta lan daur ulang ing scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

Panggunaan

Plugin modal ngganti konten sing didhelikake yen dikarepake, liwat atribut data utawa JavaScript. Iku uga overrides standar nggulung prilaku lan njedulake a .modal-backdropkanggo nyedhiyani area klik kanggo ngilangi modals ditampilake nalika ngeklik njaba modal.

Liwat atribut data

Ngalih

Aktifake modal tanpa nulis JavaScript. Setel data-bs-toggle="modal"ing unsur controller, kaya tombol, bebarengan karo data-bs-target="#foo"utawa href="#foo"kanggo target modal tartamtu kanggo ngalih.

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

Mbucal

Pembubaran bisa digayuh kanthi dataatribut ing tombol ing modal kaya sing dituduhake ing ngisor iki:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

utawa ing tombol ing njaba modal nggunakake data-bs-targetkaya sing dituduhake ing ngisor iki:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>

Nalika loro cara kanggo ngilangi modal didhukung, elinga yen ngilangi saka njaba modal ora cocog karo pola desain dialog modal WAI-ARIA . Tindakake iki kanthi resiko dhewe.

Liwat JavaScript

Nggawe modal karo siji baris JavaScript:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-bs-, kaya ing data-bs-backdrop="".

jeneng	Jinis	Default	Katrangan
`backdrop`	boolean utawa string`'static'`	`true`	Kalebu unsur modal-backdrop. Utawa, nemtokake `static`latar mburi sing ora nutup modal nalika diklik.
`keyboard`	boolean	`true`	Nutup modal nalika tombol uwal ditekan
`focus`	boolean	`true`	Nempatno fokus ing modal nalika initialized.

Metode

Cara lan transisi asinkron

Kabeh cara API ora sinkron lan miwiti transisi . Dheweke bali menyang panelpon sanalika transisi diwiwiti nanging sadurunge rampung . Kajaba iku, panggilan metode ing komponen transisi bakal diabaikan .

Deleng dokumentasi JavaScript kita kanggo informasi luwih lengkap .

Pilihan liwat

Ngaktifake konten sampeyan minangka modal. Nampa opsi opsional object.

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

ngalih

Ngalih modal kanthi manual. Bali menyang panelpon sadurunge modal wis bener ditampilake utawa didhelikake (yaiku sadurunge acara shown.bs.modalutawa hidden.bs.modalkedadeyan).

myModal.toggle()

nuduhake

Mbukak modal kanthi manual. Bali menyang panelpon sadurunge modal wis bener wis ditampilake (ie sadurunge shown.bs.modalacara occurs).

myModal.show()

Uga, sampeyan bisa ngliwati unsur DOM minangka argumen sing bisa ditampa ing acara modal (minangka relatedTargetproperti).

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

ndhelikake

Kanthi manual ndhelikake modal. Bali menyang panelpon sadurunge modal bener-bener didhelikake (yaiku sadurunge hidden.bs.modalkedadeyan kasebut).

myModal.hide()

handleUpdate

Ngatur maneh posisi modal kanthi manual yen dhuwure modal diganti nalika mbukak (umpamane yen ana scrollbar katon).

myModal.handleUpdate()

mbuwang

Ngancurake modal unsur. (Mbusak data sing disimpen ing unsur DOM)

myModal.dispose()

getInstance

Cara statis sing ngidini sampeyan entuk conto modal sing ana gandhengane karo unsur DOM

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

getOrCreateInstance

Cara statis sing ngidini sampeyan entuk conto modal sing ana gandhengane karo unsur DOM, utawa nggawe sing anyar yen ora diwiwiti.

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

Acara

Kelas modal Bootstrap nyedhiyakake sawetara acara kanggo nyambung menyang fungsionalitas modal. Kabeh acara modal dipecat ing modal dhewe (ie ing <div class="modal">).

Jenis acara	Katrangan
`show.bs.modal`	Acara iki langsung murub nalika `show`metode conto diarani. Yen disebabake klik, unsur sing diklik kasedhiya minangka `relatedTarget`properti acara kasebut.
`shown.bs.modal`	Acara iki dipecat nalika modal wis katon kanggo pangguna (bakal ngenteni transisi CSS rampung). Yen disebabake klik, unsur sing diklik kasedhiya minangka `relatedTarget`properti acara kasebut.
`hide.bs.modal`	Acara iki langsung dipecat nalika `hide`metode conto wis diarani.
`hidden.bs.modal`	Acara iki dipecat nalika modal wis rampung didhelikake saka pangguna (bakal ngenteni transisi CSS rampung).
`hidePrevented.bs.modal`	Acara iki dipecat nalika modal ditampilake, latar `static`mburi lan klik ing njaba modal utawa penet tombol uwal ditindakake kanthi pilihan keyboard utawa `data-bs-keyboard`disetel menyang `false`.

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})