in English

Modal

Sebelisa mokhoa oa ho kenya JavaScript oa Bootstrap ho kenya lipuisano sebakeng sa hau sa marang-rang bakeng sa mabokose a khanyang, litsebiso tsa basebelisi, kapa litaba tse ikhethileng ka botlalo.

Kamoo e sebetsang kateng

Pele o qala ka karolo ea modal ea Bootstrap, etsa bonnete ba hore u bala tse latelang kaha likhetho tsa rona tsa menyetla li sa tsoa fetoha.

Li-modal li hahiloe ka HTML, CSS, le JavaScript. Li behiloe holim'a ntho e 'ngoe le e' ngoe e ka har'a tokomane 'me li tlose moqolo ho tsoa ho <body>e le hore litaba tsa modal li tsamaee.
Ho tobetsa "backdrop" ea modal ho tla koala modal ka bo eona.
Bootstrap e tšehetsa fensetere e le 'ngoe feela ka nako. Mekhoa e hlophisitsoeng ha e tšehetsoe kaha re lumela hore ha e na boiphihlelo ba basebelisi.
Li-modals li sebelisa position: fixed, tseo ka linako tse ling li ka bang tse khethehileng mabapi le phetolelo ea eona. Nako le nako ha ho khonahala, beha HTML ea hau ea modal sebakeng sa boemo bo holimo ho qoba tšitiso e ka bang teng ho tsoa linthong tse ling. U ka 'na ua tobana le mathata ha u theha sehlaha ka .modalhar'a ntho e' ngoe e tsitsitseng.
Hape, ka lebaka la position: fixed, ho na le li-caveats mabapi le ho sebelisa mekhoa ea lisebelisoa tsa mehala. Sheba litokomane tsa rona tsa tšehetso ea sebatli ho fumana lintlha.
Ka lebaka la hore na HTML5 e hlalosa semantics ea eona joang, tšobotsi ea autofocusHTML ha e na phello ho mekhoa ea Bootstrap. Ho fihlela phello e tšoanang, sebelisa JavaScript e tloaelehileng:

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

Liphetho tsa animation tsa karolo ena li ipapisitse le prefers-reduced-motionpotso ea media. Sheba karolo e fokolitsoeng ea motsamao oa litokomane tsa phihlello ea rona .

Tsoela pele ho bala bakeng sa li-demos le litataiso tsa tšebeliso.

Mehlala

Ka tlase ke mohlala o tsitsitseng oa modal (o bolelang hore o na positionle 'me displayo tlositsoe). Ho kenyelelitsoe hlooho ea modal, 'mele oa modal (ea hlokehang bakeng sa padding) le botlaaseng ba modal (boikhethelo). Re kopa hore o kenyeletse lihlooho tsa modal le liketso tsa ho qhala ha ho khonahala, kapa o fane ka ketso e 'ngoe e hlakileng ea ho qhala.

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

Pontšo e phelang

Fetolela mokhoa oa ho sebetsa oa modal ka ho tobetsa konopo e ka tlase. E tla thellela fatše ebe e nyamela ho tloha holimo leqepheng.

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

Boemo bo tsitsitseng

Ha bokamorao bo behiloe ho static, modal e ke ke ea koaloa ha u tobetse ka ntle ho eona. Tobetsa konopo e ka tlase ho e leka.

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

Ho tsamaisa litaba tse telele

Ha li-modal li nka nako e telele bakeng sa sebaka sa pono sa mosebelisi kapa sesebelisoa, li tsamaea ntle le leqephe ka bolona. Leka demo e ka tlase ho bona seo re se bolelang.

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 ka boela ua etsa modal e phutholohang e lumellang ho tsamaisa 'mele oa modal ka ho eketsa .modal-dialog-scrollableho .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>

E tsepamisitsoe holimo

Eketsa .modal-dialog-centeredho .modal-dialogmodal ho thea bohareng.

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

Lisebelisoa le li-popovers

Lisebelisoa le li-popovers li ka kenngoa ka har'a mekhoa e hlokahalang. Ha li-modal li koetsoe, lisebelisoa life kapa life tsa popover tse ka hare le tsona li qheleloa ka thoko.

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

Ho sebelisa grid

Sebelisa sistimi ea grid ea Bootstrap ka har'a modal ka ho haha .container-fluidka har'a .modal-body. Ebe u sebelisa litlelase tse tloaelehileng tsa grid joalo ka ha u ne u ka etsa kae kapa kae.

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

Na u na le sehlopha sa likonopo tse hlahisang modal e tšoanang ka litaba tse fapaneng hanyane? Sebelisa event.relatedTargetle litšobotsi tsa HTMLdata-* (mohlomong ka jQuery ) ho fetola litaba tsa modal ho latela hore na konopo e tobetse.

Ka tlase ke demo e phelang e lateloang ke mohlala oa HTML le JavaScript. Ho fumana lintlha tse ling, bala litokomane tsa liketsahalo tsa modal bakeng sa lintlha tse mabapi le 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)
})

Fetola animation

Phetoho $modal-fade-transforme etsa qeto ea boemo ba .modal-dialogpele ho animation ea modal fade-in, phetoho $modal-show-transforme etsa qeto ea phetoho .modal-dialogqetellong ea modal fade-in animation.

Haeba u batla mohlala animation ea katametso, u ka seta $modal-fade-transform: scale(.8).

Tlosa animation

Bakeng sa li-modal tse hlahang feela ho e-na le ho nyamela, tlosa .fadesehlopha ho li-modal markup tsa hau.

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

Bophahamo bo matla

Haeba bophahamo ba modal bo fetoha ha e ntse e butsoe, o lokela ho letsetsa $('#myModal').modal('handleUpdate')ho lokisa boemo ba modal haeba ho hlaha scrollbar.

Ho fihlella

Etsa bonnete ba ho eketsa aria-labelledby="...", ho supa sehlooho sa modal, ho .modal. Ho feta moo, o ka fana ka tlhaloso ea puisano ea hau ea modal le aria-describedbyon .modal. Hlokomela hore ha ho hlokahale hore u kenye role="dialog"kaha re se re e kentse ka JavaScript.

Ho kenyelletsa livideo tsa YouTube

Ho kenya livideo tsa YouTube ho li-modal ho hloka JavaScript e eketsehileng eseng ho Bootstrap ho emisa ho bapala le tse ling. Sheba poso ena e thusang ea Stack Overflow bakeng sa lintlha tse ling.

Boikhethelo ba boholo

Li-modal li na le mefuta e meraro ea boikhethelo, e fumanehang ka litlelase tsa ho fetola tse tla behoa ho .modal-dialog. Lisaese tsena li kenella ka linako tse ling ho qoba mekoallo e tšekaletseng maema-kepeng a manyane.

Boholo	Sehlopha	Modal max-width
Nyenyane	`.modal-sm`	`300px`
Ea kamehla	Ha ho letho	`500px`
E kholoanyane	`.modal-lg`	`800px`
E kholo ho feta	`.modal-xl`	`1140px`

Modal ea rona ea kamehla ntle le sehlopha sa mofetoleli e etsa "bohareng" ba boholo.

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

Tšebeliso

Modal plugin e fetola litaba tsa hau tse patiloeng ha li batloa, ka likarolo tsa data kapa JavaScript. E boetse e ekelletsa .modal-openho <body>tloleng boits'oaro ba kamehla ba ho phutha 'me e hlahisa .modal-backdropho fana ka sebaka sa ho tobetsa bakeng sa ho leleka mekhoa e bontšitsoeng ha o tobetsa ka ntle ho modal.

Ka litšobotsi tsa data

Kenya modal ntle le ho ngola JavaScript. Beha data-toggle="modal"karolo ea taolo, joalo ka konopo, hammoho le data-target="#foo"kapa href="#foo"ho shebisa mokhoa o itseng oa ho fetola.

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

Ka JavaScript

Letsetsa modal ka id myModalka mola o le mong oa JavaScript:

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

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-backdrop="".

Lebitso	Mofuta	Ea kamehla	Tlhaloso
bokamorao	boolean kapa khoele`'static'`	'nete	E kenyelletsa karolo ea modal-backdrop. Ntle le moo, hlakisa `static`boemo ba morao-rao bo sa koaheleng mokhoa oa ho tobetsa.
keyboard	boolean	'nete	E koala modal ha konopo ea escape e tobetsoa
tsepamisa maikutlo	boolean	'nete	E tsepamisa maikutlo ho modal ha e qala.
bontsha	boolean	'nete	E bonts'a modal ha e qala.

Mekhoa

Mekhoa ea Asynchronous le liphetoho

Mekhoa eohle ea API ha e- synchronous 'me e qala phetoho . Ba khutlela ho motho ea letselitseng hang ha phetoho e qala empa pele e fela . Ho feta moo, mohala oa mokhoa ho karolo ea phetoho o tla hlokomolohuoa .

Sheba litokomane tsa rona tsa JavaScript bakeng sa lintlha tse ling .

`.modal(options)`

E kenya tšebetsong litaba tsa hau joalo ka mokhoa. E amohela khetho ea boikhethelo object.

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

`.modal('toggle')`

E fetola modal ka letsoho. E kgutlela ho motho ya letsetsang pele modal e bontshwa kapa e patilwe (ke hore pele ketsahalo shown.bs.modalkapa hidden.bs.modalketsahalo e etsahala).

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

`.modal('show')`

E bula modal ka letsoho. E khutlela ho motho ea letselitseng pele mokha o bonts'oa (ke hore pele shown.bs.modalketsahalo e etsahala).

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

`.modal('hide')`

E pata modal ka letsoho. E khutlela ho motho ea letselitseng pele mohale o patiloe (ke hore pele hidden.bs.modalketsahalo e etsahala).

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

`.modal('handleUpdate')`

Ka bouena fetola boemo ba modal haeba bophahamo ba modal bo fetoha ha e ntse e butse (ke hore haeba ho hlaha scrollbar).

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

`.modal('dispose')`

E senya modal oa element.

Liketsahalo

Sehlopha sa modal sa Bootstrap se pepesa liketsahalo tse 'maloa tsa ho hokahana le ts'ebetso ea modal. Liketsahalo tsohle tsa modal li lelekoa ho modal ka boeona (ke hore ho <div class="modal">).

Mofuta oa Ketsahalo	Tlhaloso
show.bs.modal	Ketsahalo ena e tuka hang hang ha `show`mokhoa oa mohlala o bitsoa. Haeba e bakoa ke ho tobetsa, ntho e tobelitsoeng e fumaneha e le `relatedTarget`thepa ea ketsahalo.
e bonts'itsoeng.bs.modal	Ketsahalo ena e ts'oaroa ha modal e entsoe hore e bonahale ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe). Haeba e bakoa ke ho tobetsa, ntho e tobelitsoeng e fumaneha e le `relatedTarget`thepa ea ketsahalo.
pata.bs.modal	Ketsahalo ena e lelekoa hang hang ha `hide`mokhoa oa mohlala o bitsoa.
patiloeng.bs.modal	Ketsahalo ena e ts'oaroa ha modal e qeta ho patoa ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe).
pataThibeloa.bs.modal	Ketsahalo ena e ts'oaroa ha modal e bonts'oa, bokamorao ba eona ke `static`'me ho tobetsa ka ntle ho modal kapa ho tobetsa konopo ea ho baleha ho etsoa ka khetho ea keyboard kapa `data-keyboard`ho hlophisoa ho `false`.

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