in English

Modal

Sèvi ak plugin modal JavaScript Bootstrap pou ajoute dyalòg sou sit ou a pou bwat limyè, notifikasyon itilizatè, oswa kontni konplètman koutim.

Ki jan li fonksyone

Anvan w kòmanse ak eleman modal Bootstrap la, asire w ke ou li sa ki annapre yo paske opsyon meni nou yo te chanje dènyèman.

Modèl yo bati ak HTML, CSS, ak JavaScript. Yo ap pozisyone sou tout lòt bagay nan dokiman an epi retire woulo liv la <body>pou kontni modal woule pito.
Klike sou "backdrop" modal la pral otomatikman fèmen modal la.
Bootstrap sipòte sèlman yon fenèt modal nan yon moman. Modal anbrike yo pa sipòte paske nou kwè yo se eksperyans itilizatè pòv yo.
Modèl itilize position: fixed, ki pafwa ka yon ti jan patikilye sou rann li yo. Chak fwa sa posib, mete HTML modal ou a nan yon pozisyon wo nivo pou evite entèferans potansyèl de lòt eleman. Ou pral gen anpil chans rankontre pwoblèm lè nidifikasyon yon .modalnan yon lòt eleman fiks.
Yon fwa ankò, akòz position: fixed, gen kèk opozisyon ak lè l sèvi avèk modal sou aparèy mobil. Gade dokiman sipò navigatè nou an pou plis detay.
Akòz fason HTML5 defini semantik li yo, atribi autofocusHTML la pa gen okenn efè nan modal Bootstrap. Pou reyalize menm efè a, sèvi ak kèk JavaScript koutim:

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

Efè animasyon eleman sa a depann de prefers-reduced-motionrechèch medya yo. Gade seksyon mouvman redui nan dokiman aksè nou an .

Kontinye lekti pou demonstrasyon ak direktiv itilizasyon.

Egzanp yo

Anba la a se yon egzanp modal estatikposition (sa vle di li yo ak displayyo te remplacé). Gen ladann header modal la, kò modal (obligatwa pou padding), ak modal footer (si ou vle). Nou mande pou w mete en-tête modal ak aksyon ranvwaye chak fwa sa posib, oswa bay yon lòt aksyon eksplisit ranvwaye.

<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

Aktive yon demonstrasyon modal k ap travay lè w klike sou bouton ki anba a. Li pral glise desann ak fennen soti nan tèt paj la.

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

Fondasyon estatik

Lè seri a mete nan estatik, modal la pa pral fèmen lè klike deyò li. Klike sou bouton ki anba a pou eseye li.

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

Defile kontni long

Lè modal yo vin twò long pou fenèt itilizatè a oswa aparèy, yo defile endepandan de paj la li menm. Eseye Demo ki anba a pou wè sa nou vle di.

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.

Ou kapab tou kreye yon modal defilable ki pèmèt defile kò modal la lè w ajoute .modal-dialog-scrollablenan .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>

Vètikalman santre

Add .modal-dialog-centeredto .modal-dialoga vètikal sant modal la.

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

Konsèy zouti ak popovers

Ti konsèy ak popovers yo ka mete nan modal jan sa nesesè. Lè modal yo fèmen, nenpòt konsèy sou zouti ak popover nan yo tou otomatikman ranvwaye.

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

Sèvi ak kadriyaj la

Sèvi ak sistèm kadriyaj Bootstrap la nan yon modal pa nidifikasyon .container-fluidnan .modal-body. Lè sa a, sèvi ak klas sistèm kadriyaj nòmal yo menm jan ou ta nenpòt lòt kote.

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

Gen yon pakèt bouton ki tout deklanche menm modal la ak kontni yon ti kras diferan? Sèvi event.relatedTargetak ak HTML data-*atribi (petèt atravè jQuery ) yo varye sa ki nan modal la depann sou ki bouton yo te klike.

Anba la a se yon Demo ap viv ki te swiv pa egzanp HTML ak JavaScript. Pou plis enfòmasyon, li dokiman evènman modal yo pou plis detay sou 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)
})

Chanje animasyon

Varyab $modal-fade-transformla detèmine eta transfòmasyon nan .modal-dialoganvan animasyon an fade-in modal, $modal-show-transformvaryab la detèmine transfòmasyon nan .modal-dialognan fen animasyon an fennen modal.

Si ou vle pou egzanp yon animasyon zoom-in, ou ka mete $modal-fade-transform: scale(.8).

Retire animasyon

Pou modal ki tou senpleman parèt olye ke fennen nan yo wè, retire .fadeklas la nan maketing modal ou a.

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

Wotè dinamik

Si wotè yon modal chanje pandan li louvri, ou ta dwe rele $('#myModal').modal('handleUpdate')pou reajiste pozisyon modal la nan ka yon defile parèt.

Aksesiblite

Asire w ou ajoute aria-labelledby="...", referans tit modal la, nan .modal. Anplis de sa, ou ka bay yon deskripsyon dyalòg modal ou a ak aria-describedbysou .modal. Remake byen ke ou pa bezwen ajoute role="dialog"paske nou deja ajoute li atravè JavaScript.

Anrejistre videyo YouTube yo

Anrejistre videyo YouTube nan modal mande pou JavaScript adisyonèl ki pa nan Bootstrap otomatikman sispann lekti ak plis ankò. Gade pòs itil Stack Overflow sa a pou plis enfòmasyon.

Gwosè si ou vle

Modal yo gen twa gwosè opsyonèl, ki disponib atravè klas modifye yo dwe mete sou yon .modal-dialog. Gwosè sa yo choute nan sèten pwen rupture pou fè pou evite ba defile orizontal sou vi ki pi etwat.

Gwosè	Klas	Modal max-lajè
Ti	`.modal-sm`	`300px`
Default	Okenn	`500px`
Gwo	`.modal-lg`	`800px`
Siplemantè gwo	`.modal-xl`	`1140px`

Modal default nou an san klas modifye konstitye modal gwosè "mwayen".

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

Itilizasyon

Plugin modal la chanje kontni kache ou sou demann, atravè atribi done oswa JavaScript. Li ajoute tou .modal-openpou <body>pase sou konpòtman defile default ak jenere yon .modal-backdroppou bay yon zòn klike sou pou ranvwaye modal yo montre lè klike deyò modal la.

Via atribi done yo

Aktive yon modal san w pa ekri JavaScript. Mete data-toggle="modal"sou yon eleman kontwolè, tankou yon bouton, ansanm ak yon data-target="#foo"oswa href="#foo"pou vize yon modal espesifik pou activer.

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

Via JavaScript

Rele yon modal ak id myModalak yon sèl liy JavaScript:

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

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-, tankou nan data-backdrop="".

Non	Kalite	Default	Deskripsyon
seri	boolean oswa fisèl la`'static'`	vre	Gen ladann yon eleman modal-backdrop. Altènativman, presize `static`pou yon seri ki pa fèmen modal la sou klike sou.
klavye	booleyen	vre	Fèmen modal la lè yo peze kle chape
konsantre	booleyen	vre	Mete konsantre sou modal la lè inisyalize.
montre	booleyen	vre	Montre modal la lè inisyalize.

Metòd

Metòd asynchrone ak tranzisyon

Tout metòd API yo asenkron epi yo kòmanse yon tranzisyon . Yo retounen kote moun k ap rele a le pli vit ke tranzisyon an kòmanse men anvan li fini . Anplis de sa, yo pral inyore yon apèl metòd sou yon eleman tranzisyon .

Gade dokiman JavaScript nou an pou plis enfòmasyon .

`.modal(options)`

Aktive kontni ou kòm yon modal. Aksepte yon opsyon opsyonèl object.

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

`.modal('toggle')`

Manyèlman aktive yon modal. Retounen bay moun kap rele a anvan modal la aktyèlman te montre oswa kache (sa vle di anvan evènman shown.bs.modalan hidden.bs.modalrive).

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

`.modal('show')`

Manyèlman ouvè yon modal. Retounen bay moun k ap rele a anvan yo montre modal la (sa vle di anvan shown.bs.modalevènman an rive).

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

`.modal('hide')`

Manyèlman kache yon modal. Retounen bay moun kap rele a anvan modal la te kache (sa vle di anvan hidden.bs.modalevènman an rive).

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

`.modal('handleUpdate')`

Manyèlman reajiste pozisyon modal la si wotè yon modal chanje pandan li ouvri (sa vle di nan ka yon defile parèt).

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

`.modal('dispose')`

Detwi modal yon eleman.

Evènman

Klas modal Bootstrap a ekspoze kèk evènman pou branche nan fonksyonalite modal. Tout evènman modal yo tire sou modal la li menm (sa vle di nan la <div class="modal">).

Kalite Evènman	Description
show.bs.modal	This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event.
shown.bs.modal	This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event.
hide.bs.modal	This event is fired immediately when the `hide` instance method has been called.
hidden.bs.modal	This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
hidePrevented.bs.modal	Evènman sa a revoke lè yo montre modal la, seri li yo `static`ak yon klik deyò modal la oswa yon peze kle chape fèt ak opsyon klavye a oswa `data-keyboard`mete sou `false`.

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