in English

I-Modal

Sebenzisa i-plugin ye-modal ye-Bootstrap ye-JavaScript ukwengeza izingxoxo kusayithi lakho ukuze uthole amabhokisi okukhanya, izaziso zabasebenzisi, noma okuqukethwe ngokwezifiso ngokuphelele.

Isebenza kanjani

Ngaphambi kokuthi uqale nge-modal ye-Bootstrap, qiniseka ukuthi ufunda okulandelayo njengoba izinketho zethu zemenyu zisanda kushintsha.

Amamodeli akhiwe nge-HTML, CSS, neJavaScript. Abekwe phezu kwayo yonke enye into kudokhumenti futhi asuse ukuskrola kokuthi <body>okuqukethwe kwe-modal kuskrole esikhundleni salokho.
Ukuchofoza "okungemuva" kwe-modal kuzovala ngokuzenzakalelayo i-modal.
I-Bootstrap isekela kuphela iwindi lemodali eyodwa ngesikhathi. Amamodeli afakwe esidlekeni awasekelwa njengoba sikholelwa ukuthi awamazi kahle abasebenzisi.
Amamodali asebenzisa position: fixed, okungenzeka ukuthi ngezinye izikhathi athize mayelana nokunikezwa kwawo. Noma nini lapho kunokwenzeka, beka i-modal yakho ye-HTML endaweni yezinga eliphezulu ukuze ugweme ukuphazamiseka okungaba khona okuvela kwezinye izici. Cishe uzohlangabezana nezinkinga lapho wenza isidleke .modalphakathi kwenye into elungisiwe.
Nakulokhu, ngenxa position: fixedye-, kuneminye imixwayiso ngokusebenzisa ama-modal kumadivayisi eselula. Bona amadokhumenti asekela isiphequluli sethu ukuze uthole imininingwane.
Ngenxa yokuthi i-HTML5 iyichaza kanjani i-semantics yayo, isibaluli se- autofocusHTML asinawo umthelela kumamodeli we-Bootstrap. Ukuze uthole umphumela ofanayo, sebenzisa i-JavaScript yangokwezifiso:

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

Umthelela wokugqwayiza wale ngxenye uncike prefers-reduced-motionembuzweni wemidiya. Bona ingxenye yokunyakaza encishisiwe yemibhalo yethu yokufinyeleleka .

Qhubeka ufunda amademo nemihlahlandlela yokusebenzisa.

Izibonelo

Ngezansi isibonelo se-modal esimileposition (okusho ukuthi saso futhi displaysikhishiwe). Kufakwe unhlokweni we-modal, umzimba we-modal (uyadingeka padding), kanye nonyaweni we-modal (ongakukhetha). Sicela ukuthi ufake izihloko ze-modal ezinezenzo zokucashisa noma nini lapho kunokwenzeka, noma unikeze esinye isenzo sokuchitha esisobala.

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

Idemo ebukhoma

Guqula idemo yemodi yokusebenza ngokuchofoza inkinobho engezansi. Izoshelela phansi bese ifiphala kusukela phezulu kwekhasi.

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

Ingemuva elimile

Uma okwasemuva kusethelwe ku-static, i-modal ngeke ivale uma uchofozwa ngaphandle kwayo. Chofoza inkinobho engezansi ukuze uyizame.

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

Ukuskrola okuqukethwe okude

Uma amamodeli eba made kakhulu endaweni yokubuka yomsebenzisi noma idivayisi, bayaskrola ngaphandle kwekhasi ngokwalo. Zama idemo engezansi ukuze ubone ukuthi siqonde ukuthini.

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.

Ungakwazi futhi ukudala i-modal enyakaziswayo evumela ukuskrola umzimba we-modal ngokwengeza .modal-dialog-scrollablekokuthi .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>

Kuphakathi nendawo

Engeza .modal-dialog-centeredukuze .modal-dialogumise phakathi nendawo imodali ngokuqondile.

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

Amathuluzi kanye popover

Izeluleko zamathuluzi kanye ne- popover zingafakwa ngaphakathi kwamamodeli njengoba kudingeka. Uma amamodeli avaliwe, noma yimaphi amathiphu nama-popover ngaphakathi nawo achithwa ngokuzenzakalelayo.

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

Ukusebenzisa igridi

Sebenzisa isistimu yegridi ye-Bootstrap ngaphakathi kwe-modal ngokuzalela .container-fluidngaphakathi kwe- .modal-body. Bese, sebenzisa amakilasi esistimu yegridi evamile njengoba ubungenza kwenye indawo.

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

Unenqwaba yezinkinobho zonke ezicupha i-modal efanayo ngokuqukethwe okuhluke kancane? Sebenzisa event.relatedTargetkanye nezibaluli ze- HTMLdata-* (mhlawumbe nge-jQuery ) ukuze uguqule okuqukethwe kwe-modal kuye ngokuthi iyiphi inkinobho echofozwe.

Ngezansi kunedemo ebukhoma elandelwa isibonelo se-HTML ne-JavaScript. Ukuze uthole ulwazi olwengeziwe, funda amadokhumenti emicimbi ye-modal ukuze uthole imininingwane kokuthi 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)
})

Shintsha ukugqwayiza

Okuguquguqukayo $modal-fade-transformkunquma isimo soguquko .modal-dialogsangaphambi kokugqwayiza kwe-modal fade-in, $modal-show-transformokuhlukile kunquma ukuguqulwa .modal-dialogekupheleni kwe-modal fade-in animation.

Uma ufuna ngokwesibonelo i-zoom-in animation, ungasetha $modal-fade-transform: scale(.8).

Susa ukugqwayiza

Kumamodeli avele avele kunokuba afiphele ukuze abukwe, susa .fadeikilasi kumakhaphu akho e-modal.

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

Ukuphakama okunamandla

Uma ukuphakama kwe-modal kushintsha ngenkathi ivuliwe, kufanele ushayele $('#myModal').modal('handleUpdate')ukuze ulungise indawo ye-modal uma kwenzeka kuvela ibha yokuskrola.

Ukufinyeleleka

Qiniseka ukuthi uyengeza aria-labelledby="...", ubhekisela kusihloko se-modal, ku .modal. Ukwengeza, unganikeza incazelo yengxoxo yakho ye-modal nge- aria-describedbyon .modal. Qaphela ukuthi awudingi ukungeza role="dialog"njengoba sesivele sengeza nge-JavaScript.

Ishumeka amavidiyo e-YouTube

Ukushumeka amavidiyo e-YouTube kumamodeli kudinga i-JavaScript eyengeziwe engekho ku-Bootstrap ukuze kumiswe ukudlalwa ngokuzenzakalelayo nokunye. Bona lokhu okuthunyelwe okuchichima kwesitaki okuwusizo ukuze uthole ulwazi olwengeziwe.

Osayizi abazikhethela

Amamodeli anosayizi abathathu abazikhethela, atholakala ngamakilasi okulungisa azobekwa ku- .modal-dialog. Laba bosayizi bangena ezindaweni ezithile zokuphumula ukuze bagweme amabha okuskrola avundlile ezimbobeni zokubuka ezinciphile.

Usayizi	Ikilasi	I-Modal max-width
Encane	`.modal-sm`	`300px`
Okuzenzakalelayo	Lutho	`500px`
Okukhulu	`.modal-lg`	`800px`
Okukhulu kakhulu	`.modal-xl`	`1140px`

I-modal yethu ezenzakalelayo ngaphandle kwesigaba sokuguqula ihlanganisa usayizi "omaphakathi".

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

Ukusetshenziswa

I-plugin ye-modal iguqula okuqukethwe kwakho okufihliwe ngokufunwa, ngezibaluli zedatha noma i-JavaScript. Iphinde yengeze .modal-openekubhaleni phezu <body>kokuziphatha kokuskrola okuzenzakalelayo futhi ikhiqize .modal-backdropukuhlinzeka ngendawo yokuchofoza yokucashisa amamodeli abonisiwe lapho uchofozwa ngaphandle kwe-modal.

Ngezibaluli zedatha

Yenza kusebenze i-modal ngaphandle kokubhala i-JavaScript. Misa data-toggle="modal"into yesilawuli, njengenkinobho, kanye ne-a data-target="#foo"noma href="#foo"ukuze uqondise i-modal ethile ukuze uyiguqule.

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

Nge-JavaScript

Shayela i-modal ene-id myModalenomugqa owodwa we-JavaScript:

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

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-backdrop="".

Igama	Uhlobo	Okuzenzakalelayo	Incazelo
okwasemuva	i-boolean noma intambo`'static'`	iqiniso	Kufaka phakathi i-elementi ye-modal-backdrop. Noma, cacisa `static`okwasemuva okungavali i-modal lapho uchofozwa.
ikhibhodi	boolean	iqiniso	Ivala i-modal lapho ukhiye we-escape ucindezelwa
gxila	boolean	iqiniso	Ibeka ukugxila ku-modal lapho iqaliswa.
umbukiso	boolean	iqiniso	Ibonisa i-modal lapho iqaliswa.

Izindlela

Izindlela ze-Asynchronous kanye noshintsho

Zonke izindlela ze-API azivumelanisi futhi ziqala inguquko . Babuyele kofonayo uma sekuqalwa uguquko kodwa lungakapheli . Ngokungeziwe, ikholi yendlela engxenyeni yoshintsho izozitshwa .

Bheka imibhalo yethu ye-JavaScript ukuze uthole ulwazi olwengeziwe .

`.modal(options)`

Yenza okuqukethwe kwakho kusebenze njengemodeli. Yamukela izinketho ozikhethela object.

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

`.modal('toggle')`

Iguqula ngokwenza i-modal. Ibuyela kofonayo ngaphambi kokuba imodali ikhonjiswe noma ifihlwe (okungukuthi ngaphambi kokuba kwenzeke shown.bs.modalnoma hidden.bs.modalisigameko).

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

`.modal('show')`

Ivula mathupha i-modal. Ibuyela kofonayo ngaphambi kokuthi imodali ikhonjiswe (okungukuthi ngaphambi kokuba shown.bs.modalumcimbi wenzeke).

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

`.modal('hide')`

Ifihla i-modal ngokwenza. Ibuyela kofonayo ngaphambi kokuthi i-modal ifihlekile (okungukuthi ngaphambi kokuthi hidden.bs.modalkwenzeke umcimbi).

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

`.modal('handleUpdate')`

lungisa mathupha indawo ye-modal uma ukuphakama kwe-modal kushintsha ngenkathi ivuliwe (okungukuthi uma kwenzeka kuvela ibha yokuskrola).

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

`.modal('dispose')`

Icekela phansi i-modal yento ethile.

Imicimbi

Ikilasi le-modal ye-Bootstrap lidalula imicimbi embalwa ukuze ixhume ekusebenzeni kwe-modal. Yonke imicimbi ye-modal ixoshwa ku-modal ngokwayo (okungukuthi ku- <div class="modal">).

Uhlobo Lomcimbi	Incazelo
show.bs.modal	Lo mcimbi uvutha ngokushesha lapho `show`indlela yesibonelo ibizwa. Uma kubangelwa ukuchofoza, into echofoziwe iyatholakala njengempahla `relatedTarget`yomcimbi.
okubonisiwe.bs.modali	Lo mcimbi uyaxoshwa uma i-modal yenziwe yabonakala kumsebenzisi (izolinda ukuthi ukuguqulwa kwe-CSS kuqedwe). Uma kubangelwa ukuchofoza, into echofoziwe iyatholakala njengempahla `relatedTarget`yomcimbi.
fihla.bs.modal	Lo mcimbi uxoshwa ngokushesha lapho `hide`indlela yesibonelo ibizwa.
kufihliwe.bs.modal	Lo mcimbi uyaxoshwa lapho i-modal isiqedile ukufihlwa kumsebenzisi (izolinda ukuthi ukuguqulwa kwe-CSS kuqedwe).
fihlaKuvinjelwe.bs.modal	Lo mcimbi uyaxoshwa uma i-modal iboniswa, ingemuva layo liwukuthi `static`futhi ukuchofoza ngaphandle kwe-modal noma ukucindezela ukhiye wokuphunyuka kwenziwa ngenketho yekhibhodi noma `data-keyboard`kusethelwe ku- `false`.

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