in English

Modal

Kozesa Bootstrap's JavaScript modal plugin okwongera dialogs ku mukutu gwo okufuna lightboxes, okumanyisibwa abakozesa, oba ebirimu custom ddala.

Engeri gye kikola

Nga tonnatandika na Bootstrap's modal component, kakasa nti osoma bino wammanga kuba menu options zaffe zakyuka gye buvuddeko.

Modals zizimbibwa ne HTML, CSS, ne JavaScript. Ziteekebwa ku buli kimu ekirala mu kiwandiiko ne ziggyawo okuzingulula okuva ku <body>olwo ebirimu bya modal ne biyiringisibwa mu kifo ky’ekyo.
Okunyiga ku modal “backdrop” kijja kuggalawo modal mu ngeri ey’otoma.
Bootstrap ewagira eddirisa lya modal limu lyokka omulundi gumu. Nested modals teziwagirwa nga bwe tukkiriza nti zibeera poor user experiences.
Modals use position: fixed, oluusi eyinza okuba eyenjawulo katono ku rendering yaayo. Buli lwe kiba kisoboka, teeka HTML yo eya modal mu kifo eky’omutendera ogw’oku ntikko okwewala okutaataaganyizibwa okuyinza okuva mu bintu ebirala. Ojja kusanga ensonga nga okola ekisu a .modalmunda mu kintu ekirala ekinywevu.
Nate, olw’oku position: fixed, waliwo okulabula okumu n’okukozesa modals ku byuma ebikozesebwa ku ssimu. Laba ebiwandiiko byaffe ebiwagira browser okumanya ebisingawo.
Olw’engeri HTML5 gy’ennyonnyolamu amakulu gaayo, ekintu kya autofocusHTML tekirina kye kikola mu Bootstrap modals. Okusobola okutuuka ku nkola y’emu, kozesa JavaScript ezimu ez’enjawulo:

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

Ekikolwa kya animation eky'ekitundu kino kyesigamye ku prefers-reduced-motionkubuuza kw'emikutu. Laba ekitundu ky'ekiteeso ekikendeezeddwa mu biwandiiko byaffe eby'okutuuka ku bantu .

Sigala ng’osoma okulaba ebifaananyi n’ebiragiro ebikwata ku nkozesa.

Eby’okulabirako

Wansi waliwo ekyokulabirako kya static modal (ekitegeeza its positionand displayhave been overridden). Mulimu omutwe gwa modal, omubiri gwa modal (ogwetaagisa ku padding), n’omutwe gwa modal (ogw’okwesalirawo). Tusaba okussaamu emitwe gya modal n'ebikolwa eby'okugoba buli lwe kiba kisoboka, oba okuwa ekikolwa ekirala eky'okugoba eky'olwatu.

<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 a working modal demo nga onyiga button wansi. Kijja kuseeyeeya wansi era kizike okuva waggulu ku lupapula.

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

Ekifo ekitali kikyukakyuka (static backdrop).

Backdrop bweteekebwa ku static, modal tejja kuggalawo nga onyiga ebweru waayo. Nywa ku bbaatuuni eri wansi okugezaako.

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

Okuyiringisiza ebirimu ebiwanvu

Modal bwe zifuuka empanvu ennyo ku viewport oba ekyuma ky'omukozesa, zitambula nga tezikwatagana na lupapula lwennyini. Gezaako demo wansi olabe kye tutegeeza.

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.

Osobola n'okukola modal egenda okutambula esobozesa okutambula omubiri gwa modal ng'ogattako .modal-dialog-scrollableku .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>

Nga eri wakati mu nneekulungirivu

Okwongerako .modal-dialog-centeredku .modal-dialogokutuuka mu vertikal wakati 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>

Ebikozesebwa ne popovers

Tooltips ne popovers bisobola okuteekebwa mu modals nga bwekyetaagisa. Modal bwe ziggalwa, tootips zonna ez’ebikozesebwa ne popovers eziri munda nazo zigobwa mu ngeri ey’otoma.

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

Nga okozesa ekipande ekiyitibwa grid

Kozesa enkola ya Bootstrap grid munda mu modal nga okola ebisu .container-fluidmunda mu .modal-body. Olwo, kozesa ebika by’enkola ya grid eya bulijjo nga bwe wandikoze awalala wonna.

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

Olina ekibinja kya buttons nga zonna zisitula modal emu nga zirina ebirimu eby'enjawulo katono? Kozesa event.relatedTargetne HTML data-*attributes (kiyinzika okuyita mu jQuery ) okukyusakyusa ebirimu mu modal okusinziira ku button ki eyanyigibwa.

Wansi waliwo live demo nga egobererwa ekyokulabirako HTML ne JavaScript. Okumanya ebisingawo, soma modal events docs okumanya ebisingawo ku 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)
})

Kyuusa ebifaananyi ebirina obulamu

Enkyukakyuka $modal-fade-transformesalawo embeera y’enkyukakyuka ya .modal-dialognga tebannaba kukola modal fade-in animation, $modal-show-transformenkyukakyuka esalawo enkyukakyuka ya .modal-dialogku nkomerero ya modal fade-in animation.

Bw’oba oyagala okugeza ekifaananyi eky’okugaziya, osobola okuteekawo $modal-fade-transform: scale(.8).

Ggyawo ebifaananyi ebirina obulamu

Ku modals ezimala okulabika okusinga okuzikira mu okulaba, ggyawo .fadeekibiina okuva ku modal markup yo.

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

Obugulumivu obw’amaanyi

Singa obugulumivu bwa modal bukyuka nga kiggule, olina okuyita $('#myModal').modal('handleUpdate')okuddamu okutereeza ekifo kya modal singa wabaawo scrollbar okulabika.

Okutuuka ku bantu

Kakasa nti oyongerako aria-labelledby="...", ng’ojuliza omutwe gwa modal, ku .modal. Okugatta ku ekyo, oyinza okuwa ennyonyola ku mboozi yo eya modal ne aria-describedbyon .modal. Weetegereze nti teweetaaga kwongerako role="dialog"okuva lwe twayongerako dda nga tuyita mu JavaScript.

Okuyingiza obutambi bwa YouTube

Okuteeka obutambi bwa YouTube mu modals kyetaagisa JavaScript endala etali mu Bootstrap okuyimiriza otomatiki okuzannya n’ebirala. Laba kino ekiyamba Stack Overflow post okumanya ebisingawo.

Sayizi ez’okwesalirawo

Modals zirina sayizi ssatu ez’okwesalirawo, ezifunibwa okuyita mu kiraasi za modifier okuteekebwa ku .modal-dialog. Sayizi zino ziyingira mu bifo ebimu eby’okumenya okwewala okutambula okw’okwebungulula ku bifo ebifunda eby’okulaba.

Obunene	Essomo	Modal max-obugazi
Tono	`.modal-sm`	`300px`
Okukosamu	Tewali	`500px`
Gazi	`.modal-lg`	`800px`
Ebinene ennyo	`.modal-xl`	`1140px`

Modal yaffe eya bulijjo awatali modifier class ekola “medium” size modal.

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

Enkozesa

Modal plugin ekyusa ebirimu byo ebikwekebwa nga bwe kyetaagisa, okuyita mu data attributes oba JavaScript. Era eyongera .modal-openku <body>to override default scrolling behavior era ekola a .modal-backdropokuwa ekifo eky'okunyiga okugoba modals eziragiddwa nga onyiga ebweru wa modal.

Okuyita mu bikwata ku data

Kozesa modal nga towandiise JavaScript. Teeka data-toggle="modal"ku elementi y'ekifuga, nga button, wamu ne a data-target="#foo"oba href="#foo"okutunuulira modal eyeetongodde okukyusakyusa.

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

Okuyita mu JavaScript

Kuba modal eriko id myModalnga erina layini emu eya JavaScript:

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

Eby’okulondako

Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-, nga mu data-backdrop="".

Erinnya	Okuwandiika	Okukosamu	Okunnyonnyola
ekifaananyi eky’emabega	boolean oba olunyiriri`'static'`	kituufu	Mulimu ekintu ekiyitibwa modal-backdrop element. Ekirala, lambika `static`ku backdrop etaggalawo modal ku click.
ekitabo ekikwata ku kibboodi	boolean	kituufu	Eggalawo modal nga escape key enyigiddwa
tereera	boolean	kituufu	Essira liteeka ku modal nga etandise.
okulaga	boolean	kituufu	Alaga modal nga etandikiddwawo.

Enkola

Enkola ezitakwatagana n’enkyukakyuka

Enkola zonna eza API tezikwatagana era zitandika enkyukakyuka . Zidda eri oyo akubye amangu ddala ng'enkyukakyuka etandise naye nga tennaggwa . Okugatta ku ekyo, okuyita enkola ku kitundu ekikyukakyuka kujja kubuusibwa amaaso .

Laba ebiwandiiko byaffe ebya JavaScript okumanya ebisingawo .

`.modal(options)`

Ekola ebirimu byo nga modal. Akkiriza eby'okulonda eby'okwesalirawo object.

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

`.modal('toggle')`

Mu ngalo ekyusakyusa modal. Edda eri oyo ayita nga modal tennalagibwa oba okukwekebwa ddala (kwe kugamba nga shown.bs.modaloba hidden.bs.modalekintu tekinnabaawo).

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

`.modal('show')`

Mu ngalo aggulawo modal. Edda eri omuyita nga modal tennalagibwa ddala (kwe kugamba nga shown.bs.modalekintu tekinnabaawo).

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

`.modal('hide')`

Mu ngalo akweka modal. Edda eri oyo akubira nga modal tennakwekebwa ddala (kwe kugamba nga hidden.bs.modalekintu tekinnabaawo).

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

`.modal('handleUpdate')`

Ddamu mu ngalo ekifo kya modal singa obugulumivu bwa modal bukyuka nga kiggule (kwe kugamba mu mbeera nga scrollbar elabika).

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

`.modal('dispose')`

Esaanyaawo modal ya elementi.

Ebibaddewo

Bootstrap's modal class eraga ebitonotono ebibaawo olw'okuyunga mu nkola ya modal. Ebintu byonna ebibaawo mu modal bikubwa ku modal yennyini (kwe kugamba ku <div class="modal">).

Ekika ky’Ekibaddewo	Okunnyonnyola
okulaga.bs.modal	Ekintu kino kikuba amangu ddala nga `show`enkola ya instance eyitiddwa. Singa kiva ku kunyiga, ekintu ekinyigiddwa kibeerawo ng’eky’obugagga ky’ekintu `relatedTarget`ekibaddewo.
eragiddwa.bs.modal	Ekintu kino kikubwa nga modal ekoleddwa okulabika eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa). Singa kiva ku kunyiga, ekintu ekinyigiddwa kibeerawo ng’eky’obugagga ky’ekintu `relatedTarget`ekibaddewo.
okukweka.bs.modal	Ekintu kino kikubwa amangu ddala nga `hide`enkola ya instance eyitiddwa.
ekikwekebwa.bs.modal	Ekintu kino kikubwa nga modal emaze okukwekebwa okuva eri omukozesa (ejja kulinda enkyukakyuka za CSS okuggwa).
hideEkiziyiza.bs.modal	Ekintu kino kikubwa nga modal eragiddwa, backdrop yaayo eri `static`era okunyiga ebweru wa modal oba okunyiga ekisumuluzo okutoloka kukolebwa nga keyboard option oba `data-keyboard`eteekeddwa ku `false`.

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