in English

Modal we de sho aw fɔ du am

Yuz Bootstrap in JavaSkript modal plɔgin fɔ ad dayalɔg dɛn to yu sayt fɔ laytbɔks, yuz notis, ɔ kɔmplit kɔstɔm kɔntinyu.

Aw i de wok

Bifo yu bigin wit Bootstrap in modal kɔmpɔnɛnt, mek shɔ se yu rid wetin de dɔŋ ya bikɔs wi mɛnyu opshɔn dɛn dɔn chenj i nɔ tu te yet.

Dɛn bil di mɔdal dɛn wit HTML, CSS, ɛn JavaSkript. Dɛn de posishun oba ɔl ɔda tin dɛn na di dɔkyumɛnt ɛn pul skrol frɔm di <body>so dat modal kɔntinyu skrol insted.
We yu klik di modal “bakdrop” i go lɔk di modal ɔtomɛtik wan.
Bootstrap de sɔpɔt wan modal winda nɔmɔ wan tɛm. Nested modals nɔ de sɔpɔt as wi biliv se dɛn na po yuz ɛkspiriɛns.
Modals use position: fixed, we kin sɔm tɛm dɛn kin bi smɔl patikyula bɔt in rɛnda. Ɛnitɛm we i pɔsibul, put yu modal HTML na wan tɔp-lɛvel pozishɔn fɔ avɔyd pɔtnɛshɛl intafɛreshɔn frɔm ɔda ɛlimɛnt dɛn. Yu go mɔs rɔn insay prɔblɛm dɛn we yu de nest wan .modalinsay ɔda fiks ɛlimɛnt.
Wans bak, bikɔs ɔf position: fixed, sɔm kɔvɛt dɛn de wit yuz modal dɛn na mobayl divays dɛn. Si wi brawza sɔpɔt dɔkyumɛnt dɛn fɔ di ditel dɛn.
Bikɔs ɔf aw HTML5 de difayn in sɛmantiks, di autofocusHTML atribyut nɔ gɛt ɛni ifɛkt na Bootstrap modals. Fɔ mek yu ebul fɔ du di sem tin, yuz sɔm kɔstɔm JavaSkript:

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

Di animashɔn ifɛkt fɔ dis kɔmpɔnɛnt de dipen pan di prefers-reduced-motionmidia kwɛstyɔn. Si di ridyus muvmɛnt sɛkshɔn na wi aksesibiliti dɔkyumentri .

Kɔntinyu fɔ rid fɔ di demo ɛn aw fɔ yuz gaydlayn dɛn.

Ɛgzampul dɛn

Dis dɔŋ ya na wan statik modal ɛgzampul (we min in positionɛn displaydɛn dɔn ɔvarayd). Insay de, di modal hεda, di modal bכdi (we nid fכ padding), εn di modal fut (opshכnal). Wi de aks yu fɔ put modal hεda wit dismis akshɔn ɛnitɛm we i pɔsibul, ɔ gi ɔda klia dismis akshɔn.

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

Layf dɛmo

Toggle wan wok modal demo bay we yu klik di bɔtin we de dɔŋ. I go slayv dɔŋ ɛn fade insay frɔm di ɔp pat na di pej.

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

Statik bakgrɔn

We dɛn sɛt bakdrop to statik, di modal nɔ go lɔk we yu klik ausayd am. Klik di bɔtin we de dɔŋ fɔ tray am.

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

Skrol lɔng kɔntinyu

We di modal dɛn kin tu lɔng fɔ di pɔsin in viupɔt ɔ divays, dɛn kin skrol indipɛndɛnt frɔm di pej sɛf. Tray di demo we de dɔŋ fɔ si wetin wi min.

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.

Yu kin mek bak wan modal we yu kin skrol we de alaw fɔ skrol di modal bɔdi bay we yu ad .modal-dialog-scrollableto .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 wan we de na di sɛnt

Add .modal-dialog-centeredto .modal-dialogfɔ vertikal sɛnt di 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>

Tultips ɛn popovers

Tultips ɛn popovers kin put insay modals as nid de. We dɛn lɔk modal dɛn, ɛni tultip ɛn popovers insay dɛnsɛf kin ɔtomɛtik dismis.

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

We yu de yuz di grid

Yutilayz di Bootstrap grid sistem insay wan modal bay we yu de nest .container-fluidinsay di .modal-body. Dɔn, yuz di nɔmal grid sistɛm klas dɛn lɛk aw yu go du ɛni ɔda say.

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

Yu gɛt wan bɔnch bɔtin dɛn we ɔl de trig di sem modal wit smɔl difrɛn kɔntinyu? Yuz event.relatedTargetɛn HTML data-*atribyut dɛn (i kin bi bay jQuery ) fɔ chenj di tin dɛn we de insay di modal dipen pan us bɔtin dɛn klik.

Dis dɔŋ ya na layv dɛmo we dɛn fala wit ɛgzampul HTML ɛn JavaSkript. Fɔ no mɔ, rid di modal events docs fɔ di ditel dɛn bɔt 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)
})

Chenj animashɔn

Di $modal-fade-transformvεriεbul de ditarmin di transfכm stet כf .modal-dialogbifo di modal fεd-in animashכn, di $modal-show-transformvεriεbul de ditarmin di transfכm כf .modal-dialogna di εnd כf di modal fεd-in animashכn.

If yu want fɔ ɛgzampul wan zoom-in animashɔn, yu kin sɛt $modal-fade-transform: scale(.8).

Rimov di animashɔn

Fɔ modal dɛn we jɔs de apia pas fɔ fade in fɔ si, pul di .fadeklas frɔm yu modal mak.

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

Dinamik ayt dɛn

If di ayt fɔ wan modal chenj we i opin, yu fɔ kɔl $('#myModal').modal('handleUpdate')fɔ ajɔst di modal in pozishɔn bak if wan skrolba apia.

Di we aw pɔsin kin ebul fɔ go de

Mek shɔ se yu ad aria-labelledby="...", we de rɛfrɛns di modal taytul, to .modal. Apat frɔm dat, yu kin gi diskripshɔn fɔ yu modal dayalɔg wit aria-describedbyon .modal. Notis se yu nɔ nid fɔ ad role="dialog"bikɔs wi dɔn ɔlrɛdi ad am bay JavaSkript.

Fɔ put di fim dɛn na Yutub fɔ put insay

Fɔ ɛmbas Yutub fim dɛn na modal dɛn nid fɔ gɛt ɔda JavaSkript we nɔ de na Bootstrap fɔ mek yu ebul fɔ stɔp fɔ ple ɛn ɔda tin dɛn ɔtomɛtik wan. Si dis ɛp Stack Overflow post fɔ mɔ infɔmeshɔn.

Saiz dɛn we yu kin pik

Modal dɛn gɛt tri opshɔnal saiz dɛn, we de bay modifya klas dɛn fɔ put pan wan .modal-dialog. Dɛn saiz dɛn ya kin kik insay sɔm brek pɔynt dɛn fɔ avɔyd ɔrizɔntal skrol bar dɛn na smɔl smɔl viupɔt dɛn.

Sayz	Klas	Modal maks-width fɔ di wan dɛn
Smɔl	`.modal-sm`	`300px`
Balans	Nɔn	`500px`
Big	`.modal-lg`	`800px`
Ekstra big wan	`.modal-xl`	`1140px`

Wi difɔlt modal we nɔ gɛt modifya klas de kɔnstityut di “midul” saiz modal.

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

Aw fɔ yuz am

Di modal plɔgin de chenj yu kɔntinyu we yu ayd we yu aks fɔ am, bay we yu yuz data atribyut ɔ JavaSkript. I de ad bak .modal-opento di <body>fɔ ɔvalayz difɔlt skrolin bihayvya ɛn jenarayz wan .modal-backdropfɔ gi wan klik eria fɔ dismis di modal dɛn we dɛn sho we yu klik ausayd di modal.

Via data atribyut dɛn

Aktiv wan modal we nɔ rayt JavaSkript. Sɛt data-toggle="modal"pan wan kɔntrol ɛlimɛnt, lɛk wan bɔtin, wit wan data-target="#foo"ɔ href="#foo"fɔ tɔch wan patikyula modal fɔ tɔgl.

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

Yu kin yuz JavaSkript fɔ yuz am

Kɔl wan modal wit id myModalwit wan layn na JavaSkript:

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

Di tin dɛn we yu kin pik fɔ du

Yu kin pas opshɔn dɛn bay we yu yuz data atribyut ɔ JavaSkript. Fɔ data atribyut dɛn, ad di opshɔn nem to data-, lɛk insay data-backdrop="".

Nem	Kayn	Balans	Tɔk bɔt
bakdrop fɔ de	boolean ɔ di string`'static'`	tru	Inklud wan modal-bakdrop ɛlimɛnt. Ɔda we de fɔ du dat, spɛsifa `static`fɔ wan bakdrop we nɔ de lɔk di modal we yu klik.
kibɔd fɔ di kibɔd	boolean we dɛn kɔl	tru	Klos di modal we dɛn prɛs di ɛspɛk ki
tink bɔt	boolean we dɛn kɔl	tru	Put di fos pan di modal we dɛn initialize.
sho	boolean we dɛn kɔl	tru	Sho di modal we dɛn initialize.

Di we aw dɛn de du am

Asynchronous mεtכd dεm εn transishכn dεm

Ɔl di API mɛtɔd dɛn na asynchronous ɛn dɛn kin stat wan transishɔn . Dɛn kin go bak to di pɔsin we kɔl am jɔs lɛk aw dɛn bigin fɔ chenj bɔt bifo i dɔn . Apat frɔm dat, dɛn go ignore wan mɛtɔd kɔl pan wan transishɔn kɔmpɔnɛnt .

Si wi JavaSkript dɔkyumentri fɔ no mɔ .

`.modal(options)`

Aktiv yu kɔntinyu as modal. Aksept wan opshɔn opshɔn dɛn object.

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

`.modal('toggle')`

Manually de toggle wan modal. Ritɔn to di pɔsin we kɔl bifo di modal dɔn rili sho ɔ ayd (dat na bifo di shown.bs.modalɔ hidden.bs.modalivin apin).

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

`.modal('show')`

Manually de opin wan modal. Ritɔn to di pɔsin we kɔl bifo di modal dɔn rili sho (dat na bifo di shown.bs.modalivin apin).

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

`.modal('hide')`

Manually de ayd wan modal. Ritɔn to di pɔsin we kɔl bifo di modal dɔn rili ayd (dat na bifo di hidden.bs.modalivin apin).

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

`.modal('handleUpdate')`

Riadjɔst di modal in pozishɔn wit yu an if di ayt fɔ wan modal chenj we i opin (dat na if wan skrolba apia).

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

`.modal('dispose')`

Destroy wan element in modal.

Di tin dɛn we kin apin

Bootstrap in modal klas de ɛksplɔz sɔm ivin dɛn fɔ huk insay modal funkshɔnaliti. Ɔl di modal ivin dɛn de faya na di modal sɛf (dat na na di <div class="modal">).

Di kayn tin we apin	Tɔk bɔt
sho.bs.modal fɔ sho	Dis ivent de faya wantɛm wantɛm we dɛn kɔl di `show`instans mɛtɔd. If na klik, di ɛlimɛnt we dɛn klik de as di `relatedTarget`prɔpati fɔ di ivin.
we dɛn sho.bs.modal	Dis ivent de faya we di modal dɔn mek visible to di yuza (go wet fɔ CSS transishɔn dɛn fɔ dɔn). If na klik, di ɛlimɛnt we dɛn klik de as di `relatedTarget`prɔpati fɔ di ivin.
ayd.bs.modal fɔ di wan dɛn we de	Dis ivent de faya wantɛm wantɛm we `hide`dɛn dɔn kɔl di instans mɛtɔd.
we dɛn ayd.bs.modal	Dis ivent de faya we di modal dɔn dɔn fɔ ayd frɔm di yuza (go wet fɔ CSS transishɔn dɛn fɔ dɔn).
hidePrevented.bs.modal we dɛn dɔn ayd	Dis ivent de faya we di modal sho, in bakdrop de `static`ɛn wan klik ausayd di modal ɔ wan ɛspɛk ki prɛs de du wit di kibɔd opshɔn ɔ `data-keyboard`sɛt to `false`.

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