Modal

Shandisa Bootstrap's JavaScript modal plugin kuti uwedzere dialog kune yako saiti yemabhokisi emwenje, zviziviso zvevashandisi, kana zvizere zvemukati zvemukati.

Zvinoshanda sei

Usati watanga neBootstrap's modal component, iva nechokwadi chekuverenga zvinotevera sezvo sarudzo dzedu dzemenu dzakangochinja.

Modals dzakavakwa neHTML, CSS, uye JavaScript. Ivo vakamisikidzwa pamusoro pezvimwe zvese zviri mugwaro uye bvisa mupumburu kubva kune <body>kuti modal zvemukati zvipumburuke panzvimbo.
Kudzvanya pane modal "kumashure" kunozovhara modal.
Bootstrap inongotsigira imwe modal hwindo panguva. Nested modals hadzitsigirwe sezvo isu tichitenda kuti hadzina ruzivo rwevashandisi.
Modals inoshandisa position: fixed, iyo dzimwe nguva inogona kuve yakati wandei nezve kupa kwayo. Pese pazvinogoneka, isa yako modal HTML munzvimbo yepamusoro-yepamusoro kudzivirira kukanganisa kunogona kubva kune zvimwe zvinhu. Iwe ungangosangana nematambudziko kana uchinge waisa .modalmukati mechimwe chinhu chakagadziriswa.
Zvekare, nekuda kwe position: fixed, kune mamwe macaveats nekushandisa modal pane nharembozha. Ona yedu bhurawuza rutsigiro docs kuti uwane ruzivo.
Nekuda kwekuti HTML5 inotsanangura sei semantics yayo, iyo autofocusHTML hunhu haina mhedzisiro muBootstrap modal. Kuti uwane maitiro akafanana, shandisa imwe tsika JavaScript:

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

Iyo animation mhedzisiro yechikamu ichi zvinoenderana prefers-reduced-motionnemubvunzo wenhau. Ona chikamu chakaderedzwa chezvinyorwa zvedu zvekusvikika .

Ramba uchiverengera demos uye nhungamiro yekushandisa.

Mienzaniso

Pazasi pane static modal muenzaniso (zvichireva kuti positionuye displayzvakapfuura). Inosanganisirwa iyo modal musoro, modal muviri (inodiwa padding), uye modal footer (sarudzo). Tinokumbira kuti ubatanidze misoro yemodal ine zviito zvekudzinga pese pazvinogoneka, kana kuti upe chimwe chiito chakajeka chekudzinga.

<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

Shandura demodhi yekushanda nekudzvanya bhatani riri pazasi. Ichatsvedza pasi uye kupera mukati kubva kumusoro kwepeji.

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

Static backdrop

Kana kuseri kwakaiswa kune static, modal haivhare kana uchidzvanya kunze kwayo. Baya bhatani riri pazasi kuti uzviedze.

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

Kupuruzira zvemukati marefu

Kana modal dzarebesa pakuona kwemushandisi kana mudziyo, ivo vanofamba vakazvimiririra kubva papeji pachayo. Edza demo pazasi kuti uone zvatiri kureva.

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.

Iwe unogona zvakare kugadzira modal inotenderera inobvumira kupuruzira modal muviri nekuwedzera .modal-dialog-scrollablekune .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>

Vertically pakati

Wedzera .modal-dialog-centeredkune .modal-dialogvertically pakati 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 uye popovers

Zvishandiso uye popovers zvinogona kuiswa mukati memodals sezvinodiwa. Kana modal dzakavharwa, chero maturusi ezvishandiso uye mapopovers mukati anoraswa otomatiki.

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

Kushandisa grid

Shandisa iyo Bootstrap grid system mukati me modal nekuisa .container-fluidmukati meiyo .modal-body. Zvadaro, shandisa akajairwa grid system makirasi sezvaungaita kumwe kumwe.

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

Iva neboka remabhatani ayo ese anokonzeresa imwe modal ine zvishoma zvakasiyana zviri mukati? Shandisa event.relatedTargetuye HTML data-*hunhu (pamwe kuburikidza nejQuery ) kusiyanisa zviri mukati me modal zvichienderana nekuti bhatani ripi rakadzvanywa.

Pazasi pane demo mhenyu inoteverwa nemuenzaniso HTML neJavaScript. Kuti uwane rumwe ruzivo, verenga modal zviitiko zvinyorwa zveruzivo nezve 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)
})

Chinja animation

Musiyano $modal-fade-transformunotara mamiriro eshanduko .modal-dialogisati yaita modal fade-mu animation, $modal-show-transformshanduko inotara shanduko .modal-dialogyepanoperera modal fade-in animation.

Kana iwe uchida semuenzaniso zoom-in animation, unogona kuseta $modal-fade-transform: scale(.8).

Bvisa animation

Kune ma modal anongooneka pane kudzima kuti aone, bvisa .fadekirasi kubva pane yako modal markup.

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

Dynamic heights

Kana hurefu hwe modal huchichinja ichiri kuvhurika, iwe unofanirwa kufona $('#myModal').modal('handleUpdate')kuti ugadzirise chinzvimbo che modal kuitira kana scrollbar ikaoneka.

Accessibility

Iva nechokwadi chekuwedzera aria-labelledby="...", uchireva zita re modal, ku .modal. Pamusoro pezvo, iwe unogona kupa tsananguro yemodal dialog yako ne aria-describedbypa .modal. Ziva kuti haufanire kuwedzera role="dialog"sezvo isu tatozviwedzera kuburikidza neJavaScript.

Kubatanidza mavhidhiyo eYouTube

Kuisa mavhidhiyo eYouTube mumodals kunoda yekuwedzera JavaScript isiri muBootstrap kuti imise otomatiki kutamba nezvimwe. Ona iyi inobatsira Stack Overflow post kuti uwane rumwe ruzivo.

Optional sizes

Modals ine matatu esarudzo saizi, anowanikwa kuburikidza ne modifier makirasi kuti aiswe pa .modal-dialog. Aya saizi anopinda mune mamwe mabreakpoints kudzivirira akachinjika scrollbar pane nhete dzekutarisa.

Size	Kirasi	Modal max-width
Diki	`.modal-sm`	`300px`
Default	Hapana	`500px`
Zvikuru	`.modal-lg`	`800px`
Kuwedzera kukuru	`.modal-xl`	`1140px`

Yedu default modal isina modifier kirasi inoumba "yepakati" saizi modal.

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

Usage

Iyo modal plugin inoshandura yako yakavanzika yemukati paunoda, kuburikidza nedata hunhu kana JavaScript. Iyo inowedzerawo .modal-openkune <body>yekupfuura default kupuruzira maitiro uye inogadzira .modal-backdropyekupa yekudzvanya nzvimbo yekudzinga yakaratidzwa modal kana uchidzvanya kunze kwe modal.

Via data hunhu

Shandisa modal pasina kunyora JavaScript. Gadzirisa data-toggle="modal"chinhu chekutonga, sebhatani, pamwe chete nea data-target="#foo"kana href="#foo"kunanga imwe modhi yekushandura.

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

Via JavaScript

Fonera modal ine id myModaline mutsara mumwechete weJavaScript:

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

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-, semu data-backdrop="".

Zita	Type	Default	Tsanangudzo
kumashure	boolean kana tambo`'static'`	chokwadi	Inosanganisira modal-backdrop element. Neimwe nzira, tsanangura `static`kune yekumashure iyo isingavhare modal pakudzvanya.
keyboard	boolean	chokwadi	Inovhara modal kana kiyi yekutiza ikadzvanywa
focus	boolean	chokwadi	Inoisa tarisiro pane modal kana yatangwa.
show	boolean	chokwadi	Inoratidza modal kana yatangwa.

Nzira

Asynchronous nzira uye shanduko

Yese nzira dzeAPI dzine asynchronous uye dzinotanga shanduko . Vanodzokera kumunhu anenge afona pachangotanga shanduko asi isati yapera . Pamusoro pezvo, kufona kwenzira pachikamu chekuchinja kuchafuratirwa .

Ona zvinyorwa zvedu zveJavaScript kuti uwane rumwe ruzivo .

`.modal(options)`

Inomisa zvirimo zvako se modal. Inobvuma sarudzo dzaungada object.

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

`.modal('toggle')`

Pamaoko anoshandura modal. Inodzokera kune akafona modal isati yanyatsoratidzwa kana kuvanzwa (kureva kuti shown.bs.modalkana hidden.bs.modalchiitiko chisati chaitika).

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

`.modal('show')`

Nemaoko anovhura modal. Inodzokera kune akafona modal isati yanyatsoratidzwa (kureva kuti shown.bs.modalchiitiko chisati chaitika).

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

`.modal('hide')`

Anozvivanza modal. Inodzokera kune akafona modal isati yanyatsovanzwa (kureva kuti hidden.bs.modalchiitiko chisati chaitika).

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

`.modal('handleUpdate')`

Rongedza nemaoko chinzvimbo che modal kana kureba kwe modal kukachinja payakavhurika (kureva kuti kana scrollbar ikabuda).

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

`.modal('dispose')`

Inoparadza modal yechinhu.

Zviitiko

Bootstrap's modal kirasi inofumura zviitiko zvishoma zvekukochekera kuita modal mashandiro. Zvese zviitiko zve modal zvinodzingwa pa modal pachayo (kureva pa <div class="modal">).

Chiitiko Type	Tsanangudzo
show.bs.modal	Ichi chiitiko chinopisa nekukasira kana `show`nzira yemuenzaniso inodanwa. Kana ikakonzerwa nekudzvanya, chinhu chakadzvanywa chinowanikwa sechinhu `relatedTarget`chechiitiko.
kuratidza.bs.modal	Ichi chiitiko chinodzingwa kana modal yaitwa kuti ionekwe kumushandisi (inomirira kuti CSS shanduko ipedze). Kana ikakonzerwa nekudzvanya, chinhu chakadzvanywa chinowanikwa sechinhu `relatedTarget`chechiitiko.
hide.bs.modal	Ichi chiitiko chinodzingwa nekukasira kana iyo `hide`muenzaniso nzira yadaidzwa.
zvakavanzika.bs.modal	Ichi chiitiko chinodzingwa kana modal yapedza kuvanzwa kubva kumushandisi (inomirira kuti CSS shanduko ipedze).
hidePrevented.bs.modal	Chiitiko ichi chinodzingwa kana modal yaratidzwa, kumashure kwayo `static`uye kudzvanya kunze kwe modal kana kutiza kiyi yekutsikirira inoitwa neiyo keyboard sarudzo kana `data-keyboard`kusetwa ku `false`.

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