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>

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>

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>

Maneka warna isi modal

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

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 staticlatar mburi sing ora nutup modal nalika diklik.
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 showmetode conto diarani. Yen disebabake klik, unsur sing diklik kasedhiya minangka relatedTargetproperti 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 relatedTargetproperti acara kasebut.
hide.bs.modal Acara iki langsung dipecat nalika hidemetode conto wis diarani.
hidden.bs.modal Acara iki dipecat nalika modal wis rampung didhelikake saka pangguna (bakal ngenteni transisi CSS rampung). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})