in English

Moodaalii

Sanduuqawwan ifaa, beeksisa fayyadamaa, ykn qabiyyee guutummaatti amalaaf qaaqa gara marsariitii keetti dabaluudhaaf, Bootstrap's JavaScript modal plugin fayyadami.

Akkaataa itti hojjetu

Qaama moodaalii Bootstrap jalqabuu kee dura, filannoowwan menu keenyaa dhiheenya kana waan jijjiiramaniif kanneen armaan gadii dubbisuu kee mirkaneessi.

Moodaalonni HTML, CSS, fi JaavaScript waliin ijaaramaniiru. Isaan galmee keessatti waan biraa hunda irratti kan dhaabbatanii fi <body>qabiyyeen moodaalii bakka isaa akka garagalfamuuf tarree irraa balleessu.
Modal “backdrop” irratti cuqaasuun ofumaan modal cufa.
Bootstrap yeroo tokkotti foddaa moodaalii tokko qofa deeggara. Nested modals muuxannoo fayyadamaa gadhee ta'uu isaanii waan amannuuf hin deeggaraman.
Modals use position: fixed, kunis yeroo tokko tokko waa'ee agarsiisa isaa xiqqoo adda ta'uu danda'a. Yeroo danda'ametti, HTML moodaalii kee bakka sadarkaa olaanaa irra kaa'i, kunis qaamolee biroo irraa jeequmsi akka hin uumamneef. .modalYeroo a elementii dhaabbataa biraa keessaa nesting gootu dhimmoota keessa galuun kee hin oolu .
Ammas, sababa , position: fixedmeeshaalee moobaayilaa irratti moodaalota fayyadamuu wajjin of eeggannoowwan tokko tokko jiru. Bal'ina isaaf docs deeggarsa browser keenya ilaalaa .
Sababa akkaataa HTML5 hiika isaa ibsutti, amalli autofocusHTML moodaalota Bootstrap keessatti bu'aa hin qabu. Bu'aa walfakkaatu galmaan ga'uuf, JaavaScript amala tokko tokko fayyadami:

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

Bu'aan sochii qaama kanaa prefers-reduced-motiongaaffii miidiyaa irratti hundaa'a. Kutaa sochii hir'ate sanada dhaqqabummaa keenyaa ilaali .

Demoo fi qajeelfama itti fayyadamaaf dubbisuu itti fufi.

Fakkeenyaaf

Armaan gaditti fakkeenya moodaalii istaatiksiiposition (hiikni isaas isaa fi displayirra darbamaniiru jechuudha). Kan hammataman mataduree moodaalii, qaama moodaalii (f barbaachisu padding), fi jalaan moodaalii (dirqama). Yeroo danda'ametti mata dureewwan moodaalii tarkaanfiiwwan hojii irraa ari'uu waliin akka hammattan, ykn tarkaanfii hojii irraa ari'uu ifa ta'e kan biraa akka kennitan isin gaafanna.

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

Deemoo kallattiin

Qabduu armaan gadii cuqaasuun demoo moodaalii hojjetu jijjiiri. Innis gadi siqee gubbaa fuula irraa ni fade in ta'a.

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

Duubbee istaatiksii

Yeroo duubbee gara static qindaa'u, moodaaliin yeroo ala cuqaastu hin cufamu. Yaaluuf button armaan gadii cuqaasaa.

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

Qabiyyee dheeraa garagalchuu

Yeroo moodaloonni buufata ilaalchaa fayyadamaa ykn meeshaadhaaf baay'ee dheeraa ta'an, fuula mataa isaa irraa walaba ta'anii garagalchu. Maal jechuu keenya ilaaluuf demo armaan gadii yaalaa.

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.

Akkasumas moodaalii garagalfamuu danda'u kan qaama moodaalii .modal-dialog-scrollablegara tti dabaluudhaan garagalchuu hayyamu uumuu dandeessa .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>

Giddugaleessa dhaabbataa ta’e

Moodaalii vertikaaliin giddugaleessa gochuuf .modal-dialog-centeredgara itti dabali ..modal-dialog

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

Gorsa meeshaalee fi popovers

Tooltips fi popovers akka barbaachisummaa isaatti modals keessa kaa'uun ni danda'ama. Yeroo moodaalonni cufaman, tooltipps fi popovers kamiyyuu keessa jirus ofumaan ni kufa.

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

Giriidii fayyadamuudhaan

Sirna tarjaa Bootstrap moodaalii .container-fluidkeessaa keessaa nesting gochuun fayyadami .modal-body. Sana booda, akkuma bakka biraatti gootutti gita sirna giiridii idilee fayyadami.

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

Tuuta buttooni hundi isaanii qabiyyee xiqqoo adda ta'een moodaalii walfakkaataa kakaasan qabduu? Fayyadamaa event.relatedTargetfi amaloota HTMLdata-* ( karaa jQuery ta'uu danda'a ) qabiyyee moodaalichaa qaree kamtu cuqaafame irratti hundaa'uun garaagarummaa uumuuf.

Armaan gaditti live demo kan fakkeenya HTML fi JavaScript itti aanee jira. Odeeffannoo dabalataaf, bal'inaaf galmeewwan taateewwan moodaalii dubbisirelatedTarget .

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

Sochii qaamaa jijjiiri

Jijjiiramaan $modal-fade-transformhaalata jijjiiramaa kan .modal-dialogsochii moodaalii fade-in dura $modal-show-transformmurteessa, jijjiiramaan jijjiirraa of .modal-dialogdhuma sochii moodaalii fade-in murteessa.

Yoo fakkeenyaaf sochii guddisuu barbaadde, saaguu dandeessa $modal-fade-transform: scale(.8).

Animeeshinii balleessi

Moodaalota salphaatti mul'ataniif ilaaluuf fade in osoo hin taane, .fadegita mallattoo moodaalii kee irraa haqi.

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

Olka’iinsa daayinamikii

Yoo olka'iinsi moodaalichaa osoo banaa ta'ee jijjiirame, yoo $('#myModal').modal('handleUpdate')barruun tarree mul'ate bakka moodaalichaa irra deebi'ii sirreessuuf waamuu qabda.

Dhaqqabummaa

Mata duree moodaalii aria-labelledby="..."wabeeffachuun, gara .modal. Dabalataan, ibsa qaaqa moodaalii kee aria-describedbyirratti on waliin kennuu dandeessa .modal. role="dialog"Hubadhaa duraanuu karaa JavaScript waan itti daballeef dabaluun isin hin barbaachisu .

Viidiyoo YouTube keessa galchuu

Viidiyoowwan YouTube modal keessatti galchuun ofumaan tapha dhaabuuf Bootstrap keessa hin taane JavaScript dabalataa barbaada fi kanneen biroo. Odeeffannoo dabalataaf barreeffama Stack Overflow gargaaraa kana ilaali .

Safara filannoo

Moodaalonni hammangaa filannoo sadii qabu, karaa gita fooyyessaa a irratti kaa'amuu danda'u .modal-dialog. Hangaawwan kunniin bakka cabbii murtaa'e irratti kick in ta'u, kunis barruulee qajeeltoowwan mul'annoo dhiphoo irratti akka hin uumamneef.

Hamma ga'u	Kutaa	Moodaalii max-bal'ina
Xiqqoo	`.modal-sm`	`300px`
Durtii dha	Homaa	`500px`
Bal'aa	`.modal-lg`	`800px`
Dabalataan guddaa	`.modal-xl`	`1140px`

Moodaalli keenya durtii gita fooyyessaa malee moodaala guddina “giddu galeessaa” uuma.

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

Fayyadama

Ijaarsi moodaalii qabiyyee dhokataa kee gaaffii irratti, karaa amaloota deetaa ykn JaavaScript jijjiira. Akkasumas amala garagalchuu durtii irra darbuu .modal-openirratti dabalee yeroo moodaaliin ala cuqaastu moodaalota agarsiifaman kuffisuuf naannoo cuqaasuu kennuudhaaf a uuma.<body>.modal-backdrop

Karaa amaloota deetaa

JaavaScript osoo hin barreessiin moodaalii tokko hojii irra oolchi. Qaama too'ataa irratti saagi data-toggle="modal", akka qaree, waliin data-target="#foo"ykn href="#foo"moodaalii murtaa'e jijjiiruuf irratti xiyyeeffachuuf.

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

Karaa JaavaScript

Moodaalii id myModalqabu sarara JaavaScript tokkoon waami:

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

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-backdrop="".

Maqaa	Akaakuu	Durtii dha	Ibsa
duubbee	boolean ykn tarree`'static'`	dhugaa	Qaama moodaalii-duubbee of keessaa qaba. `static`Akka filannootti, duubbee kan moodaalii cuqaasuu irratti hin cufneef ifteessi .
kiiboordii	boolee	dhugaa	Yeroo furtuun miliquu dhiibamu moodaalii cufa
xiyyeeffannoo kennuu	boolee	dhugaa	Yeroo jalqabamu xiyyeeffannoo moodaalii irratti kaa'a.
agarsiisuu	boolee	dhugaa	Moodaalii yeroo jalqabamu agarsiisa.

Malawwan

Malawwanii fi ce’umsawwan wal hin simne

Malleen API hundi wal hin simnee fi ce'umsa jalqabu . Akkuma ce'umsi jalqabame garuu osoo hin xumuramin gara nama bilbileetti deebi'u . Dabalataan, waamichi malaa qaama ce'umsaa irratti ni tuffatama .

Odeeffannoo dabalataaf galmee JaavaScript keenya ilaali .

`.modal(options)`

Qabiyyee kee akka moodaaliitti hojii irra oolcha. Filannoo filannoo tokko fudhata object.

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

`.modal('toggle')`

Harkaan moodaalii tokko jijjiira. Moodaaliin qabatamaan osoo hin agarsiifamin ykn hin dhokatiin dura (jechuunis osoo taatee shown.bs.modalykn hin uumamin dura) gara waamichaatti deebi'a.hidden.bs.modal

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

`.modal('show')`

Harkaan moodaalii tokko bana. Moodaaliin qabatamaan osoo hin agarsiifamiin dura (jechuunis shown.bs.modaltaatee osoo hin uumamin dura) gara waamichaatti deebi'a.

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

`.modal('hide')`

Harkaan moodaalii tokko dhoksa. Moodaaliin qabatamaan osoo hin dhokatin dura (jechuunis osoo hidden.bs.modaltaatee hin uumamin dura) gara waamichaatti deebi'a.

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

`.modal('handleUpdate')`

Yoo olka'iinsi moodaalichaa yeroo banaa ta'e jijjiirame (jechuunis yoo barruun tarree mul'ate) bakka moodaalichaa harkaan irra deebi'ii sirreessii.

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

`.modal('dispose')`

Moodaalii elementii tokkoo ni balleessa.

Taateewwan

Gitni moodaalii Bootstrap taateewwan muraasa gara dalagaa moodaaliitti hooking gochuuf saaxila. Taateewwan moodaalii hundi moodaalii mataa isaa irratti (jechuunis <div class="modal">) irratti dhukaafamu.

Gosa Taatee	Ibsa
agarsiisa.bs.moodaalii	Taatee kun yeroo `show`mala fakkeenyaa waamamu battalumatti dhukaasa. Yoo cuqaasaatiin uumame, qaamni cuqaafame akka `relatedTarget`qabeentaa taateetti argama.
agarsiifame.bs.moodaalii	Taatee kun yeroo moodaaliin fayyadamaaf akka mul'atu godhame ni dhukaafama (ce'umsa CSS xumuruuf ni eega). Yoo cuqaasaatiin uumame, qaamni cuqaafame akka `relatedTarget`qabeentaa taateetti argama.
dhoksaa.bs.moodaalii	Taatee kun yeroo `hide`mala fakkeenyaa waamame battalumatti dhukaafama.
dhokataa.bs.moodaalii	Taatee kun kan dhukaafamu yeroo moodaaliin fayyadamaa irraa dhokatee xumuredha (ce'umsa CSS xumuramuu eega).
dhoksiIttifame.bs.modal	Taatee kun kan dhukaafamu yeroo moodaaliin agarsiifamu, duubni isaa `static`fi cuqaasuun moodaaliin ala jiru ykn dhiibbaa furtuu miliquu filannoo gabatee furtuu wajjin raawwatama ykn `data-keyboard`gara `false`.

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