in English

Modal

Anggo plugin modal JavaScript Bootstrap pikeun nambihan dialog kana situs anjeun pikeun kotak lampu, bewara pangguna, atanapi kontén anu lengkep.

Kumaha gawéna

Sateuacan ngamimitian sareng komponén modal Bootstrap, pastikeun maca ieu di handap sabab pilihan ménu kami parantos robih.

Modals diwangun ku HTML, CSS, jeung JavaScript. Aranjeunna nuju diposisikan leuwih sagalana sejenna dina dokumen jeung cabut gulung ti <body>ambéh eusi modal scrolls gantina.
Ngaklik dina "backdrop" modal bakal otomatis nutup modal.
Bootstrap ngan ngarojong hiji jandela modal dina hiji waktu. Modél bersarang henteu didukung sabab kami yakin yén éta mangrupikeun pangalaman pangguna anu goréng.
Modals make position: fixed, nu kadang bisa jadi bit husus ngeunaan rendering na. Sabisana, nempatkeun HTML modal anjeun dina posisi tingkat luhur pikeun nyegah poténsi gangguan ti elemen séjén. Anjeun kamungkinan bakal ngalaman masalah nalika nyarang .modaldina unsur tetep anu sanés.
Sakali deui, alatan position: fixed, aya sababaraha caveats kalawan ngagunakeun modals dina alat nu bagerak. Tingali dokumén pangrojong browser kami pikeun detil.
Kusabab kumaha HTML5 ngahartikeun semantik na, atribut autofocusHTML teu boga pangaruh dina modals Bootstrap. Pikeun ngahontal éfék anu sami, paké sababaraha JavaScript khusus:

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

Pangaruh animasi tina komponén ieu gumantung kana prefers-reduced-motionpamundut média. Tempo bagian gerak ngurangan tina dokuméntasi aksés kami .

Tetep maca pikeun demo sareng pedoman pamakean.

Contona

Di handap ieu conto modal statik (hartina na positiongeus displayoverridden). Kaasup header modal, awak modal (diperlukeun pikeun padding), jeung footer modal (opsional). Kami nyuhunkeun anjeun ngalebetkeun header modal sareng tindakan ngabubarkeun sabisana, atanapi nyayogikeun tindakan ngilangkeun eksplisit anu sanés.

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

Live demo

Toggle demo modal kerja ku ngaklik tombol di handap. Bakal ngageser ka handap tur luntur ti luhur 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" 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>

Latar statik

Nalika backdrop disetel ka statik, modal moal nutup nalika ngaklik luar éta. Klik tombol di handap pikeun nyobaan eta.

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

Ngagulung eusi panjang

Lamun modals jadi panjang teuing pikeun viewport pamaké atawa alat, maranéhna ngagulung bebas tina kaca sorangan. Coba demo di handap pikeun ningali naon anu kami maksud.

What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.

Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground.

Just own the night like the 4th of July! I’m gon’ put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I’m gon’ put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.

You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by?

Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.

We'd keep all our promises be us against the world. If you get the chance you better keep her. It's time to bring out the big, big, big, big, big, big balloons. I hope you got a healthy appetite. Don't let the greatness get you down, oh, oh yeah. Yeah, she's footloose and so fancy free. I want the jaw droppin', eye poppin', head turnin', body shockin'. End of the rainbow looking treasure.

Anjeun oge bisa nyieun hiji modal scrollable nu ngidinan ngagulung awak modal ku nambahkeun .modal-dialog-scrollablekana .modal-dialog.

What follows is just some placeholder text for this modal dialog. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

We'd keep all our promises be us against the world. In another life I would be your girl. We can dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching tattoos. So open up your heart and just let it begin. 'Cause she's the muse and the artist. She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I know one spark will shock the world, yeah yeah. If you only knew what the future holds.

Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

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

Vertikal dipuseurkeun

Tambahkeun .modal-dialog-centeredka .modal-dialogka puseur vertikal 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 na popovers

Tooltips na popovers bisa disimpen dina modals sakumaha diperlukeun. Nalika modals ditutup, sagala tooltips na popovers dina ogé 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>

Ngagunakeun grid nu

Anggo sistem grid Bootstrap dina modal ku nyarang .container-fluiddina .modal-body. Teras, nganggo kelas sistem grid normal sapertos anu anjeun lakukeun di mana waé.

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

Boga kebat tombol anu sadayana micu modal anu sami sareng eusi anu rada béda? Paké event.relatedTargetjeung atribut HTMLdata-* (jigana via jQuery ) pikeun rupa-rupa eusi modal gumantung kana tombol nu diklik.

Di handap ieu demo live dituturkeun ku conto HTML jeung JavaScript. Kanggo inpo nu leuwih lengkep, baca docs acara modal pikeun detil ngeunaan 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" 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="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)
})

Ngarobah animasi

Variabel $modal-fade-transformnangtukeun kaayaan transformasi .modal-dialogsaméméh animasi fade-in modal, $modal-show-transformvariabel nangtukeun transformasi .modal-dialogdina tungtung animasi fade-in modal.

Upami anjeun hoyong contona animasi zum-in, anjeun tiasa nyetél $modal-fade-transform: scale(.8).

Leupaskeun animasi

Pikeun modal anu ngan saukur némbongan tinimbang luntur pikeun ditingali, cabut .fadekelas tina markup modal anjeun.

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

Jangkungna dinamis

Upami jangkungna modal robih nalika dibuka, anjeun kedah nelepon $('#myModal').modal('handleUpdate')pikeun nyaluyukeun deui posisi modal upami aya scrollbar.

Aksesibilitas

Pastikeun pikeun nambahkeun aria-labelledby="...", ngarujuk kana judul modal, ka .modal. Salaku tambahan, anjeun tiasa masihan pedaran ngeunaan dialog modal anjeun sareng aria-describedbyon .modal. Catet yén anjeun henteu kedah nambihan role="dialog"sabab kami parantos nambihanana via JavaScript.

Embedding video YouTube

Embedding video YouTube dina modals merlukeun JavaScript tambahan teu di Bootstrap pikeun otomatis ngeureunkeun playback sareng nu sanesna. Tingali tulisan Stack Overflow ieu pikeun inpormasi anu langkung lengkep.

Ukuran pilihan

Modals gaduh tilu ukuran pilihan, sadia via kelas modifier pikeun ditempatkeun dina .modal-dialog. Ukuran ieu kick in di breakpoints tangtu pikeun nyegah scrollbars horizontal dina viewports sempit.

Ukuran	Kelas	Modal max-lebar
Leutik	`.modal-sm`	`300px`
Default	Euweuh	`500px`
Gede	`.modal-lg`	`800px`
Ekstra badag	`.modal-xl`	`1140px`

Modal standar kami tanpa kelas modifier mangrupikeun modal ukuran "sedeng".

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

Pamakéan

Modél plugin toggles eusi disumputkeun Anjeun on demand, via atribut data atawa JavaScript. Ogé nambihan .modal-openka <body>override kabiasaan ngagugulung standar sarta dibangkitkeun a .modal-backdropnyadiakeun wewengkon klik pikeun dismissing modals ditémbongkeun nalika ngaklik luar modal.

Via atribut data

Aktipkeun modal tanpa nulis JavaScript. Disetél data-toggle="modal"dina elemen controller, kawas tombol, babarengan jeung data-target="#foo"atawa href="#foo"pikeun nargétkeun modal husus pikeun toggle.

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

Ngaliwatan JavaScript

Nelepon modal sareng id myModalsareng hiji baris JavaScript:

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

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-, sapertos dina data-backdrop="".

Ngaran	Tipe	Default	Katerangan
latar	boolean atawa string`'static'`	leres	Ngawengku unsur modal-backdrop. Alternatipna, tangtukeun `static`pikeun backdrop nu teu nutup modal dina klik.
kibor	boolean	leres	Nutup modal nalika konci kabur dipencet
fokus	boolean	leres	Nempatkeun fokus kana modal nalika initialized.
nempokeun	boolean	leres	Némbongkeun modal nalika dimimitian.

Métode

Métode Asynchronous sareng transisi

Sadaya metode API henteu sinkron sareng ngamimitian transisi . Aranjeunna balik deui ka panelepon pas transisi dimimitian tapi saméméh éta ends . Sajaba ti éta, panggero métode dina komponén transisi bakal dipaliré .

Tempo dokuméntasi JavaScript kami pikeun inpo nu leuwih lengkep .

`.modal(options)`

Aktipkeun eusi anjeun salaku modal. Narima hiji pilihan pilihan object.

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

`.modal('toggle')`

Sacara manual toggles modal. Mulih ka panelepon saméméh modal sabenerna geus ditémbongkeun atawa disumputkeun (ie saméméh shown.bs.modalatawa hidden.bs.modalkajadian lumangsung).

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

`.modal('show')`

Sacara manual muka modal. Mulih ka panelepon saméméh modal sabenerna geus ditémbongkeun (ie saméméh shown.bs.modalacara lumangsung).

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

`.modal('hide')`

Sacara manual nyumputkeun modal. Mulih ka panelepon saméméh modal geus sabenerna disumputkeun (ie saméméh hidden.bs.modalacara lumangsung).

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

`.modal('handleUpdate')`

Nyaluyukeun posisi modal sacara manual upami jangkungna modalna robih nalika dibuka (upami upami aya scrollbar).

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

`.modal('dispose')`

Ngancurkeun modal hiji unsur.

Kajadian

Kelas modal Bootstrap ngungkabkeun sababaraha acara pikeun nyambungkeun kana fungsionalitas modal. Sadaya acara modal dipecat dina modal sorangan (ie di <div class="modal">).

Jenis Acara	Katerangan
show.bs.modal	Kajadian ieu langsung hurung nalika `show`metode conto disebut. Upami disababkeun ku klik, unsur anu diklik sayogi salaku `relatedTarget`hak milik acara.
ditémbongkeun.bs.modal	Kajadian ieu dipecat nalika modalna parantos katingali ku pangguna (bari ngantosan transisi CSS réngsé). Upami disababkeun ku klik, unsur anu diklik sayogi salaku `relatedTarget`hak milik acara.
hide.bs.modal	Kajadian ieu langsung dipecat nalika `hide`metode conto parantos disebut.
hidden.bs.modal	Acara ieu dipecat nalika modal parantos disumputkeun tina pangguna (bari ngadagoan transisi CSS réngsé).
hidePrevented.bs.modal	Kajadian ieu dipecat nalika modal ditampilkeun, backdrop na nyaéta `static`sareng klik di luar modal atanapi pencét konci ngewa dilakukeun nganggo pilihan keyboard atanapi `data-keyboard`disetel ka `false`.

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