Source

Modal

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

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:

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

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

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.

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

Sampeyan uga bisa nggawe modal sing bisa digulung sing ngidini nggulung awak modal kanthi .modal-dialog-scrollablenambahake .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>

Vertikal tengah

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

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

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

Duwe akeh tombol sing kabeh micu modal sing padha karo isi sing rada beda? Gunakake event.relatedTargetlan atribut HTMLdata-* ( bisa liwat jQuery ) 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-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)
})

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

Dhuwur dinamis

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

Aksesibilitas

Dadi manawa kanggo nambah role="dialog"lan aria-labelledby="...", referensi judhul modal, kanggo .modal, lan role="document"kanggo .modal-dialogdhewe. Kajaba iku, sampeyan bisa menehi katrangan babagan dialog modal karo aria-describedbyon .modal.

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

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

Panggunaan

Plugin modal ngganti konten sing didhelikake yen dikarepake, liwat atribut data utawa JavaScript. Iku uga nambah .modal-openkanggo <body>ngatasi standar nggulung prilaku lan ngasilaken a .modal-backdropkanggo nyedhiyani area klik kanggo ngilangi modals ditampilake nalika ngeklik njaba modal.

Liwat atribut data

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

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

Liwat JavaScript

Nelpon modal karo id myModalkaro siji baris JavaScript:

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

Pilihan

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

jeneng	Jinis	Default	Katrangan
latar mburi	boolean utawa string`'static'`	bener	Kalebu unsur modal-backdrop. Utawa, nemtokake `static`latar mburi sing ora nutup modal nalika diklik utawa nalika pencet tombol uwal.
papan ketik	boolean	bener	Nutup modal nalika tombol uwal ditekan
fokus	boolean	bener	Nempatno fokus ing modal nalika initialized.
nuduhake	boolean	bener	Nuduhake modal nalika diwiwiti.

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 .

`.modal(options)`

Ngaktifake konten sampeyan minangka modal. Nampa opsi opsional object.

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

`.modal('toggle')`

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

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

`.modal('show')`

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

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

`.modal('hide')`

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

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

`.modal('handleUpdate')`

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

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

`.modal('dispose')`

Ngancurake modal unsur.

Acara

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

Jinis 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.
ditampilake.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.

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})