in English

Modal

Tirhisa Bootstrap’s JavaScript modal plugin ku engetela ti-dialog eka sayiti ya wena ku kuma mabokisi ya ku vonakala, switiviso swa vatirhisi, kumbe swilo leswi endleriweke wena hi ku helela.

Ndlela leyi swi tirhaka ha yona

Loko u nga si sungula hi xiphemu xa modal xa Bootstrap, tiyiseka leswaku u hlaya leswi landzelaka tanihi leswi swihlawulekisi swa hina swa menyu swi cinceke sweswinyana.

Timodali ti akiwile hi HTML, CSS na JavaScript. Va vekiwile ehenhla ka swin’wana hinkwaswo eka tsalwa naswona va susa ku rhendzeleka eka <body>leswaku nhundzu ya modal yi rhendzeleka ematshan’weni ya sweswo.
Ku tsindziyela eka “backdrop” ya modal swi ta pfala modal hi ku tisungulela.
Bootstrap yi seketela ntsena fasitere rin’we ra modal hi nkarhi. Ti modals leti nested a ti seketeriwi tanihileswi hi pfumelaka leswaku i mintokoto yo biha ya vatirhisi.
Modals use position: fixed, leyi minkarhi yin’wana yi nga va yo hlawuleka nyana hi ku hundzuluxela ka yona. Loko swi koteka, veka HTML ya wena ya modal eka xiyimo xa le henhla ku papalata ku kavanyeteka loku nga vaka kona ku suka eka swiaki swin’wana. U ta hlangana na swiphiqo loko u nesting a .modalendzeni ka element yin’wana leyi nga cinciki.
Nakambe, hikwalaho ka position: fixed, ku na switsundzuxo swo karhi hi ku tirhisa ti-modal eka switirhisiwa swa tiselfoni. Vona ti-doc ta hina ta nseketelo wa browser ku kuma vuxokoxoko.
Hikwalaho ka ndlela leyi HTML5 yi hlamuselaka semantiki ya yona ha yona, xihlawulekisi xa autofocusHTML a xi na vuyelo eka timodali ta Bootstrap. Leswaku u fikelela vuyelo lebyi fanaka, tirhisa JavaScript yin’wana leyi endleriweke wena:

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

Vuyelo bya animation bya xiphemu lexi byi titshege hi prefers-reduced-motionxivutiso xa midiya. Vona xiyenge xa ku famba loku hungutiweke xa matsalwa ya hina ya ku fikelela .

Tshama u ri karhi u hlaya ku kuma ti-demo ni swiletelo swa matirhiselo.

Swikombiso

Laha hansi ku na xikombiso xa static modal (leswi vulaka leswaku xa xona positionnaswona displayswi hungutiwile). Ku katsiwile nhloko ya modal, miri wa modal (lowu lavekaka eka padding), na nhloko ya modal (ya ku hlawula). Hi kombela leswaku u katsa tinhlokomhaka ta modal leti nga na swiendlo swo hlongola loko swi koteka, kumbe u nyika goza rin’wana ro hlongola leri nga erivaleni.

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

Demo leyi hanyaka

Cinca demo ya modal leyi tirhaka hi ku tikhoma buti leyi nga laha hansi. Yi ta rhetela ehansi yi tlhela yi nyamalala ku suka ehenhla ka tluka.

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

Xifaniso xa le ndzhaku lexi nga cinciki

Loko backdrop yi vekiwile eka static, modal a yi nge pfali loko u tsindziyela ehandle ka yona. Click button leyi nga laha hansi ku yi ringeta.

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

Ku rhendzeleka ka swilo swo leha

Loko ti modals ti leha ngopfu eka viewport kumbe xitirhisiwa xa mutirhisi, ti scroll ti tiyimele hi toxe eka tluka hi roxe. Ringeta demo leyi nga laha hansi ku vona leswaku hi vula yini.

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.

U nga ha tlhela u endla modal leyi nga rhendzelekaka leyi pfumelelaka ku rhendzeleka miri wa modal hi ku engetela .modal-dialog-scrollableeka .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>

Yi le xikarhi hi ndlela leyi yimisiweke

Engetela .modal-dialog-centeredeka .modal-dialogku vertically center ya 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>

Switsundzuxo swa switirhisiwa na ti-popovers

Ti Tooltips nati popovers tinga vekiwa endzeni ka ti modals tani hileswi swilaveka. Loko ti modals ti pfariwile, ti tootips tihi na tihi na ti popovers endzeni na tona ti hlongoriwa hi ku tisungulela.

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

Hi ku tirhisa giridi

Tirhisa sisiteme ya giridi ya Bootstrap endzeni ka modal hi ku endla swisaka .container-fluidendzeni ka .modal-body. Kutani, tirhisa titlilasi ta fambiselo ra gridi leti tolovelekeke hilaha u nga ta endla hakona kun’wana ni kun’wana.

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

Xana u na ntlhambi wa swikomba-nkarhi leswi hinkwaswo swi pfuxaka modal yin’we leyi nga ni swilo leswi hambaneke nyana? Tirhisa event.relatedTargetna swihlawulekisi swa HTMLdata-* (swi nga endleka hi ku tirhisa jQuery ) ku cinca-cinca leswi nga endzeni ka modal ku ya hi leswaku i buti yihi leyi tsindziyeleke.

Laha hansi ku na demo leyi hanyaka leyi landzeriwaka hi xikombiso xa HTML na JavaScript. Ku kuma vuxokoxoko byo tala, hlaya ti-doc ta swiendlakalo swa modal ku kuma vuxokoxoko eka 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)
})

Cinca swifaniso leswi hanyaka

Xihlawulekisi $modal-fade-transformxi kumisisa xiyimo xa ku hundzuka xa .modal-dialogemahlweni ka xifaniso xa modal fade-in, $modal-show-transformxihlawulekisi xi kumisisa ku hundzuka ka .modal-dialogemakumu ka xifaniso xa modal fade-in.

Loko u lava xikombiso xifaniso xa ku kurisa, u nga veka $modal-fade-transform: scale(.8).

Susa swifaniso leswi hanyaka

Eka ti-modal leti humelelaka ntsena ematshan’weni yo nyamalala leswaku ti ta languta, susa .fadetlilasi eka mfungho wa wena wa modal.

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

Ku tlakuka loku cinca-cincaka

Loko ku tlakuka ka modal ku cinca loko yi pfulekile, u fanele ku bela riqingho $('#myModal').modal('handleUpdate')leswaku u lulamisa xiyimo xa modal loko ko tshuka ku humelela scrollbar.

Ku fikelela

Tiyiseka leswaku u engetela aria-labelledby="...", u kombetela eka xihloko xa modal, eka .modal. Ku engetela kwalaho, u nga ha nyika nhlamuselo ya mbulavurisano wa wena wa modal hi aria-describedbyon .modal. Xiya leswaku a wu lavi ku engetela role="dialog"tanihi leswi se hi swi engetelaka hi ku tirhisa JavaScript.

Ku nghenisa tivhidiyo ta YouTube

Ku nghenisa tivhidiyo ta YouTube eka ti-modal swi lava JavaScript leyi engetelekeke leyi nga riki eka Bootstrap leswaku yi yimisa ku tlanga hi ku tisungulela ni swin’wana. Vona post leyi ya Stack Overflow leyi pfunaka ku kuma vuxokoxoko byo tala.

Tisayizi leti nga hlawuriwa

Timodali ti na tisayizi tinharhu to hlawula, leti kumekaka hi ku tirhisa titlilasi ta mucinci leti nga ta vekiwa eka .modal-dialog. Tisayizi leti ti nghena eka tindhawu to karhi to tshoveka leswaku ti papalata ti- scrollbar leti nga etlhelo eka swivono leswitsongo.

Sayizi	Tlilasi	Modal max-ku anama ka swilo
Xitsongo	`.modal-sm`	`300px`
Ku tlula	Hava	`500px`
Lexikulu	`.modal-lg`	`800px`
Swikulu leswi engetelekeke	`.modal-xl`	`1140px`

Modal ya hina ya default handle ka modifier class yi vumba modal ya sayizi ya “medium”.

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

Matirhiselo

Plugin ya modal yi cinca-cinca swilo swa wena leswi fihliweke loko swi laviwa, hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Yi tlhela yi engetela .modal-openeka <body>ku tlula mahanyelo ya ku rhendzeleka ka xiviri naswona yi humesa a .modal-backdropku nyika ndhawu yo tsindziyela yo hlongola timodali leti kombisiweke loko u tsindziyela ehandle ka modali.

Hi ku tirhisa swihlawulekisi swa data

Endla leswaku modal yi tirha handle ko tsala JavaScript. Seta data-toggle="modal"eka elemente ya controller, ku fana na button, xikan’we na a data-target="#foo"kumbe href="#foo"ku kongomisa modal yo karhi ku toggle.

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

Hi ku tirhisa JavaScript

Fonela modal hi id myModalhi layini yin’we ya JavaScript:

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

Swihlawulekisi

Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-, tanihi le ka data-backdrop="".

Vito	Muxaka	Ku tlula	Nhlamuselo
xifaniso xa le ndzhaku	boolean kumbe ntambhu`'static'`	ntiyiso	Ku katsa na xiaki xa modal-backdrop. Handle ka sweswo, boxa `static`eka backdrop leyi nga pfaliki modal eka click.
xikhiya xa xikhiya	xitsonga xitsonga	ntiyiso	Ku pfala modal loko ku tshikileriwa escape key
kongoma	xitsonga xitsonga	ntiyiso	Yi veka ku kongomisa eka modal loko yi sunguriwa.
kombisa	xitsonga xitsonga	ntiyiso	Ku kombisa modal loko yi sunguriwa.

Maendlelo

Maendlelo ya asynchronous na ku cinca

Maendlelo hinkwawo ya API i ya asynchronous naswona ya sungula ku cinca . Va tlhelela eka mufoyini hi ku hatlisa loko ku cinca ku sungurile kambe ku nga si hela . Ku engetela kwalaho, ku vitaniwa ka ndlela eka xiphemu lexi cincaka ku ta honisiwa .

Vona matsalwa ya hina ya JavaScript ku kuma vuxokoxoko byo tala .

`.modal(options)`

Ku endla leswaku nhundzu ya wena yi tirha tanihi modal. Ku amukela swihlawulekisi swa ku hlawula object.

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

`.modal('toggle')`

Hi voko u cinca-cinca modal. Ku tlhelela eka mufoyini loko modal yi nga si kombisiwa kumbe ku tumbetiwa hakunene (i.e. emahlweni ka ku humelela shown.bs.modalkumbe hidden.bs.modalxiendlakalo).

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

`.modal('show')`

Hi voko u pfula modal. Ku tlhelela eka mufoyini loko modal yi nga si kombisiwa hakunene (i.e. shown.bs.modalxiendlakalo xi nga si humelela).

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

`.modal('hide')`

Hi voko u tumbeta modal. Ku tlhelela eka mufoyini loko modal yi nga si fihliwa hakunene (i.e. hidden.bs.modalxiendlakalo xi nga si humelela).

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

`.modal('handleUpdate')`

Lulamisa hi voko xiyimo xa modal loko ku tlakuka ka modal ku cinca loko yi pfulekile (i.e. loko ku humelela scrollbar).

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

`.modal('dispose')`

Ku herisa modal ya elemente.

Swiendlakalo

Tlilasi ya modal ya Bootstrap yi paluxa swiendlakalo swi nga ri swingani swo khoma eka ntirho wa modal. Swiendlakalo hinkwaswo swa modal swi duvuriwa eka modal hi yoxe (i.e. eka <div class="modal">).

Muxaka wa Xiendlakalo	Nhlamuselo
kombisa.bs.modal	Xiendlakalo lexi xi pfurha hi ku hatlisa loko ku `show`vitaniwa ndlela ya xikombiso. Loko swi vangiwa hi ku tsindziyela, xiaki lexi tsindziyeleke xi kumeka tanihi `relatedTarget`nhundzu ya xiendlakalo.
ku kombisiwile.bs.modal	Xiendlakalo lexi xi duvuriwa loko modal yi endliwile yi vonaka eka mutirhisi (yi ta rindza ku cinca ka CSS ku hela). Loko swi vangiwa hi ku tsindziyela, xiaki lexi tsindziyeleke xi kumeka tanihi `relatedTarget`nhundzu ya xiendlakalo.
fihla.bs.modal	Xiendlakalo lexi xi duvuriwa hi ku hatlisa loko ndlela ya `hide`xikombiso yi vitaniwile.
leswi fihliweke.bs.modal	Xiendlakalo lexi xi duvuriwa loko modal yi hetile ku tumbetiwa eka mutirhisi (yi ta rindza ku cinca ka CSS ku hela).
hideSwi siveriwile.bs.modal	Xiendlakalo lexi xi duvuriwa loko modal yi kombisiwa, backdrop ya yona i `static`naswona ku tsindziyela ehandle ka modal kumbe ku tshikileriwa ka xilotlelo xo baleka ku endliwa hi nhlawulo wa khibhodi kumbe `data-keyboard`ku vekiwa eka `false`.

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