in English

Modal nga

Usaren ti JavaScript modal plugin ti Bootstrap tapno manginayon kadagiti dialogo iti site-mo para kadagiti lightbox, pakaammo ti agar-aramat, wenno naan-anay a kostumbre a linaon.

No kasano ti panagandar dayta

Sakbay a mangrugi iti modal a paset ti Bootstrap, siguraduen a basaen dagiti sumaganad ta nabiit pay a nagbaliw dagiti pagpilianmi iti menu.

Dagiti modal ket naibangon babaen ti HTML, CSS, ken JavaScript. Dagitoy ket naiposision iti rabaw ti amin a dadduma pay iti dokumento ken ikkaten ti panag-scroll manipud iti <body>tapno ti modal a linaon ket ag-scroll ketdi.
Ti panangi-click iti modal a “backdrop” ket automatiko nga iserrana ti modal.
Ti Bootstrap ket mangsuporta laeng ti maysa a modal a tawa iti tunggal maysa a gundaway. Dagiti naisanglad a modal ket saan a nasuportaran a kas patienmi a dagitoy ket nakurapay a padas ti agar-aramat.
Dagiti modal ket agus-usar ti position: fixed, a mabalin a no dadduma ket bassit a partikular maipapan ti panagiparangna. No mabalin, ikabilmo ti modal nga HTML-mo iti kangatuan nga antas a posision tapno maliklikan ti mabalin a pannakasinga manipud kadagiti sabali nga elemento. Mabalin a makasabatka kadagiti isyu no ag-umok ti maysa iti .modaluneg ti sabali a naikeddeng nga elemento.
Maminsan manen, gapu iti position: fixed, adda sumagmamano a pakdaar iti panangusar kadagiti modal kadagiti mobile device. Kitaen dagiti dokumento ti suporta ti browsermi para kadagiti detalye.
Gapu ti no kasano a ti HTML5 ket mangikeddeng ti semantikana, ti autofocuskabileg ti HTML ket awan ti epektona kadagiti modal ti Bootstrap. Tapno magun-od ti isu met laeng nga epekto, agusarka iti sumagmamano a kostumbre a JavaScript:

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

Ti epekto ti animasion daytoy a paset ket agpannuray iti prefers-reduced-motionpanagsaludsod ti media. Kitaen ti benneg ti naikkat a panaggunay ti dokumentasionmi ti pannakagun-od .

Itultuloymo ti agbasa para kadagiti demo ken pagannurotan ti panagusar.

Dagiti pagarigan

Iti baba ket ti estatiko a modal a pagarigan (kayatna a sawen ti its positionand displayhave been overridden). Nairaman ti modal nga ulo, modal a bagi (kasapulan para iti padding), ken modal footer (opsional). Kiddawenmi nga iramanmo dagiti modal nga ulo nga addaan kadagiti panagikkat a panagtignay no mabalin, wenno mangipaay ti sabali a nalawag a panagikkat a panagtignay.

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

Agbiag nga demo

I-toggle ti agtartrabaho a modal demo babaen ti panangi-klik iti buton iti baba. Ag-slide dayta nga agpababa ken agkupas manipud iti ngato ti panid.

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

Estatiko nga backdrop

No ti backdrop ket naikabil iti estatiko, ti modal ket saan nga agserra no ag-click iti ruar daytoy. I-click ti button iti baba tapno padasem dayta.

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

Panag-scroll iti atiddog a linaon

No dagiti modal ket agbalin nga atiddog unay para iti viewport wenno alikamen ti agar-aramat, ag-scrollda nga agwaywayas iti panid a mismo. Padasem ti demo iti baba tapno makitam no ania ti kayatmi a sawen.

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.

Mabalinmo pay ti mangpartuat ti mai-scroll a modal a mangipalubos ti panag-scroll ti bagi ti modal babaen ti pananginayon .modal-dialog-scrollableiti .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>

Bertikal a naisentro

Inayon .modal-dialog-centerediti .modal-dialogtapno bertikal a sentro ti 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 ken popovers

Mabalin nga ikabil dagiti Tooltip ken popover iti uneg dagiti modal no kasapulan. No dagiti modal ket naserraan, ania man a toltips ken popovers iti uneg ket automatiko met a mailaksid.

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

Panangusar iti grid

Usaren ti sistema ti grid ti Bootstrap iti uneg ti maysa a modal babaen ti panagumok .container-fluiditi uneg ti .modal-body. Kalpasanna, usarem dagiti gagangay a klase ti sistema ti grid a kas iti aramidem iti sadinoman.

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

Adda kadi bunggoy dagiti buton nga amin ket mangtignay iti isu met laeng a modal nga addaan iti naiduma bassit a linaon? Usaren event.relatedTargetken dagiti HTML data-*a kababalin (mabalin babaen ti jQuery ) tapno agbaliw ti linaon ti modal depende no ania a buton ti nai-klik.

Iti baba ket ti live demo a sarunuen ti pagarigan nga HTML ken JavaScript. Para iti ad-adu pay nga impormasion, basaen dagiti modal events docs para kadagiti detalye iti 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)
})

Baliwan ti animasion

Ti $modal-fade-transformvariable ket mangikeddeng ti kasasaad ti panagbalbaliw ti .modal-dialogsakbay ti modal a fade-in nga animasion, ti $modal-show-transformvariable ket mangikeddeng ti panagbalbaliw ti .modal-dialogiti ngudo ti modal a fade-in nga animasion.

No kayatmo kas pagarigan ti zoom-in nga animasion, mabalinmo nga ikeddeng ti $modal-fade-transform: scale(.8).

Ikkaten ti animasion

Para kadagiti modal a basta agparang imbes nga agkupas tapno makita, ikkaten ti .fadeklase manipud iti modal markup-mo.

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

Dinamiko a kangato

No agbaliw ti kangato ti maysa a modal bayat a nakalukat daytoy, rumbeng nga umawagka $('#myModal').modal('handleUpdate')tapno ilinteg manen ti posision ti modal no bilang ta agparang ti scrollbar.

Ti pannakagun-od

Siguraduen nga inayon ti aria-labelledby="...", a mangtukoy ti modal a paulo, iti .modal. Mainayon pay, mabalinmo nga ited ti panangiladawan ti modal a dialogom babaen ti aria-describedbyon .modal. Imutektekanyo a saanyo a kasapulan ti mangnayon role="dialog"yantangay nainayonmi dayta babaen ti JavaScript.

Panangikabil kadagiti video iti YouTube

Ti panangikabil kadagiti video ti YouTube kadagiti modal ket kasapulan ti kanayonan a JavaScript nga awan iti Bootstrap tapno automatiko a maisardeng ti panagtokar ken dadduma pay. Kitaen daytoy a makatulong a Stack Overflow a post para iti ad-adu pay nga impormasion.

Opsional a kadakkel

Dagiti modal ket addaan kadagiti tallo a pagpilian a kadakkel, a magun-od babaen dagiti klase ti mangbalbaliw a maikabil iti maysa a .modal-dialog. Dagitoy a kadakkel ket agkick in kadagiti sumagmamano a breakpoint tapno maliklikan dagiti horizontal scrollbar kadagiti akikid a viewport.

Kadakkel	Klase	Modal nga max-kalawa
Bassit	`.modal-sm`	`300px`
Default	Awan	`500px`
Dakkel	`.modal-lg`	`800px`
Ekstra ti dakkel	`.modal-xl`	`1140px`

Ti default a modaltayo nga awan ti klase ti modifier ket mangbukel ti “medium” a kadakkel a modal.

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

Panagusar

Ti modal a plugin ket mangbalbaliw ti nailemmeng a linaonmo no kasapulan, babaen dagiti attribute ti datos wenno JavaScript. Daytoy ket manginayon pay .modal-openiti <body>tapno mangbalbaliw ti kasisigud a kababalin ti panag-scroll ken mangpataud ti a .modal-backdroptapno mangipaay ti lugar ti panagpidut para iti panangilaksid kadagiti naipakita a modal no ag-klik iti ruar ti modal.

Babaen kadagiti attribute ti datos

Aktiboen ti modal a saan nga agsurat iti JavaScript. Itakderan data-toggle="modal"iti maysa nga elemento ti kontrolador, a kas ti buton, agraman ti maysa data-target="#foo"wenno href="#foo"tapno puntiriaen ti espesipiko a modal tapno ag-toggle.

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

Babaen ti JavaScript

Awagan ti modal nga addaan iti id myModalnga addaan iti maymaysa a linia ti JavaScript:

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

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-backdrop="".

Nagan	Tipo	Default	Panangiladawan
backdrop ti likud	boolean wenno ti kuerdas`'static'`	agpayso	Iramanna ti modal-backdrop nga elemento. Saan laeng a dayta, ikeddeng `static`para iti backdrop a saan a mangiserra ti modal iti panagpidut.
teklado nga	boolean nga	agpayso	Serraan ti modal no maipidut ti escape key
agperreng	boolean nga	agpayso	Ikabilna ti pokus iti modal no mairugi.
ipakita	boolean nga	agpayso	Ipakita ti modal no mairugi.

Dagiti Pamay-an

Dagiti asynchronous a pamay-an ken panagbalbaliw

Amin a pamay-an ti API ket asynchronous ken mangrugi ti panagbalbaliw . Agsublida iti tumawag apaman a mairugi ti panagbalbaliw ngem sakbay nga agpatingga . Iti pay maipatinayon, ti maysa nga awag ti pamay-an iti maysa a panagbalbaliw a paset ket mailaksidto .

Kitaen ti dokumentasionmi iti JavaScript para iti ad-adu pay nga impormasion .

`.modal(options)`

Aktiboenna ti linaonmo kas modal. Awaten ti maysa nga opsional a pagpilian object.

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

`.modal('toggle')`

Manual nga i-toggle ti maysa a modal. Agsubli iti tumawag sakbay nga aktual a naipakita wenno nailemmeng ti modal (kayatna a sawen sakbay a mapasamak ti shown.bs.modalwenno hidden.bs.modalpasamak).

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

`.modal('show')`

Manual a luktan ti maysa a modal. Agsubli iti tumawag sakbay nga aktual a naipakita ti modal (kayatna a sawen sakbay a shown.bs.modalmapasamak ti pasamak).

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

`.modal('hide')`

Manual nga ilemmeng ti maysa a modal. Agsubli iti tumawag sakbay nga aktual a nailemmeng ti modal (kayatna a sawen sakbay a hidden.bs.modalmapasamak ti pasamak).

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

`.modal('handleUpdate')`

Manual nga i-adjust manen ti posision ti modal no agbaliw ti kangato ti modal bayat a nakalukat (kayatna a sawen no agparang ti scrollbar).

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

`.modal('dispose')`

Dadaelenna ti modal ti maysa nga elemento.

Dagiti Pasamak

Ti modal a klase ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti modal a panagusar. Amin a modal a pasamak ket maipaputok iti modal a mismo (kayatna a sawen iti <div class="modal">).

Kita ti Pasamak	Panangiladawan
ipakita.bs.modal nga	Daytoy a pasamak ket agputok a dagus no ti `show`pamay-an ti pagarigan ket maawagan. No gapuanan ti panagpidut, ti nai-klik nga elemento ket magun-od a kas ti `relatedTarget`tagikua ti pasamak.
naipakita.bs.modal	Daytoy a pasamak ket mapaputok no ti modal ket naaramiden a makita ti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a malpas). No gapuanan ti panagpidut, ti nai-klik nga elemento ket magun-od a kas ti `relatedTarget`tagikua ti pasamak.
ilemmeng.bs.modal nga	Daytoy a pasamak ket dagus a mapaputok no ti `hide`pamay-an ti pagarigan ket naawagan.
nailemmeng.bs.modal	Daytoy a pasamak ket mapaputok no ti modal ket nalpas a nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a malpas).
ilemmengNalappedan.bs.modal	Daytoy a pasamak ket mapaputok no ti modal ket maipakita, ti backdropna ket `static`ken ti maysa a panagpidut iti ruar ti modal wenno ti maysa a panaglibas a panagpidut ti teklado ket maaramid babaen ti pagpilian ti teklado wenno `data-keyboard`naikeddeng iti `false`.

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