in English

Modal

Koresha Bootstrap ya JavaScript modal plugin kugirango wongere ibiganiro kurubuga rwawe kumasanduku yumucyo, imenyesha ryabakoresha, cyangwa ibikubiyemo rwose.

Uburyo ikora

Mbere yo gutangira hamwe na moderi ya Bootstrap, menya neza gusoma ibikurikira nkuko menu yacu iherutse guhinduka.

Moderi yubatswe hamwe na HTML, CSS, na JavaScript. Bashyizwe hejuru y'ibindi byose biri mu nyandiko hanyuma bakureho umuzingo <body>kugirango ibintu bya modal bizunguruka aho.
Kanda kuri modal "backdrop" izahita ifunga modal.
Bootstrap ishyigikira idirishya rimwe gusa icyarimwe. Moderi yatoranijwe ntabwo ishyigikiwe nkuko twemera ko ari uburambe bwabakoresha.
Uburyo bukoreshwa position: fixed, bushobora rimwe na rimwe kuba bwihariye kubijyanye no gutanga. Igihe cyose bishoboka, shyira HTML modal yawe murwego rwo hejuru kugirango wirinde kwivanga mubindi bintu. Birashoboka ko uzahura nibibazo mugihe utera .modalikindi kintu gihamye.
Ubundi na none, kubera position: fixed, hari caveats hamwe no gukoresha modal kubikoresho bigendanwa. Reba amashakiro yacu ashyigikira doc kubisobanuro birambuye.
Bitewe nuburyo HTML5 isobanura ibisobanuro byayo, ikiranga autofocusHTML nta ngaruka igira muburyo bwa Bootstrap. Kugirango ugere ku ngaruka zimwe, koresha JavaScript imwe yihariye:

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

Ingaruka ya animasiyo yibi bice biterwa prefers-reduced-motionnibibazo byitangazamakuru. Reba igice cyagabanijwe cyicyiciro cyibisobanuro byacu .

Komeza usome kuri demo nubuyobozi bukoreshwa.

Ingero

Hasi nurugero ruhagazeposition neza (bisobanura ibyarwo kandi displaybyararenze). Harimo imitwe yuburyo, umubiri usanzwe (bisabwa kuri padding), hamwe na moderi yerekana (bidashoboka). Turasaba ko ushiramo imitwe yuburyo hamwe nibikorwa byo kwirukana igihe cyose bishoboka, cyangwa gutanga ikindi gikorwa cyo kwirukana.

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

Kubaho

Kanda kuri moderi ikora yerekana kanda buto hepfo. Bizanyerera kandi bishire hejuru yurupapuro.

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

Imiterere yinyuma

Iyo backdrop yashizwe kuri static, modal ntizifunga mugihe ukanze hanze. Kanda buto hepfo kugirango ugerageze.

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

Kuzenguruka ibintu birebire

Iyo moderi iba ndende cyane kubakoresha kureba cyangwa igikoresho, bazunguruka batisunze page ubwayo. Gerageza demo hepfo kugirango urebe icyo dushaka kuvuga.

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.

Urashobora kandi gukora moderi izunguruka yemerera kuzenguruka umubiri muburyo .modal-dialog-scrollablewongeyeho .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>

Hagati

Ongeraho .modal-dialog-centeredkugirango .modal-dialoguhagarike hagati 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>

Ibikoresho hamwe na popovers

Ibikoresho na popovers birashobora gushirwa muburyo bukenewe. Iyo moderi zifunze, ibikoresho byose hamwe na popovers imbere nabyo birahita birukanwa.

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

Gukoresha gride

Koresha Bootstrap grid sisitemu muburyo bwo guteramo .container-fluidimbere muri .modal-body. Noneho, koresha urwego rusanzwe rwa grid sisitemu nkuko wabishaka ahandi.

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

Ufite buto ya buto yose itera modal imwe hamwe nibintu bitandukanye? Koresha event.relatedTargetna HTML data-*ibiranga (birashoboka binyuze kuri jQuery ) kugirango uhindure ibiri muri modal ukurikije buto yakanze.

Hasi ni demo nzima ikurikirwa nurugero HTML na JavaScript. Kubindi bisobanuro, soma ibyabaye modal docs kugirango ubone ibisobanuro birambuye 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)
})

Hindura animasiyo

Impinduka $modal-fade-transformigena ihinduka ryimiterere ya .modal-dialogmbere yuburyo bwa fade-in animasiyo, $modal-show-transformimpinduka igena impinduka .modal-dialogkumpera ya modal fade-in animasiyo.

Niba ushaka urugero rwa zoom-in animasiyo, urashobora gushiraho $modal-fade-transform: scale(.8).

Kuraho animasiyo

Kuburyo bugaragara gusa aho gushira kugirango turebe, kura urwego muburyo .fadebwawe.

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

Uburebure butangaje

Niba uburebure bwa modal ihinduka mugihe ifunguye, ugomba guhamagara $('#myModal').modal('handleUpdate')kugirango uhindure imyanya yuburyo mugihe umuzingo ugaragara.

Kuboneka

Wemeze kongeraho aria-labelledby="...", werekana umutwe wuburyo, kuri .modal. Byongeye kandi, urashobora gutanga ibisobanuro byuburyo bwikiganiro hamwe aria-describedbyna .modal. Menya ko udakeneye kongeramo role="dialog"kuva tumaze kongeramo binyuze kuri JavaScript.

Gushyira amashusho ya YouTube

Gushyira amashusho ya YouTube muburyo busaba JavaScript yinyongera itari muri Bootstrap kugirango ihite ihagarika gukina nibindi. Reba iyi nyandiko ifasha Stack Overflow post kubindi bisobanuro.

Ingano yubushake

Moderi ifite ubunini butatu butandukanye, buraboneka binyuze mumashuri ahindura kugirango ashyirwe kuri a .modal-dialog. Ingano itangira ahantu runaka kugirango wirinde gutambuka gutambitse kumurongo muto.

Ingano	Icyiciro	Ubugari bwubugari
Ntoya	`.modal-sm`	`300px`
Mburabuzi	Nta na kimwe	`500px`
Kinini	`.modal-lg`	`800px`
Kinini cyane	`.modal-xl`	`1140px`

Mburabuzi modal idafite icyiciro gihindura icyiciro kigizwe nubunini "buringaniye".

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

Ikoreshwa

Amacomeka ya modal ahinduranya ibintu byihishe kubisabwa, ukoresheje ibiranga data cyangwa JavaScript. Iyongera kandi .modal-openkuri <body>to override imyitwarire idasanzwe yo kuzunguruka kandi ikabyara a .modal-backdropgutanga agace kanda kugirango wirukane moderi yerekanwe mugihe ukanze hanze yuburyo.

Binyuze mu biranga amakuru

Kora modal utanditse JavaScript. Shyira data-toggle="modal"ku kintu kigenzura, nka buto, hamwe na data-target="#foo"cyangwa href="#foo"kugirango ugaragaze uburyo bwihariye bwo guhinduranya.

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

Binyuze kuri JavaScript

Hamagara modal ifite id myModalifite umurongo umwe wa JavaScript:

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

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-, Nka Muri data-backdrop="".

Izina	Andika	Mburabuzi	Ibisobanuro
Inyuma	boolean cyangwa umugozi`'static'`	ni ukuri	Harimo modal-backdrop element. Ubundi, vuga `static`kuri backdrop idafunze modal kanda.
Mwandikisho	boolean	ni ukuri	Gufunga modal mugihe urufunguzo rwo guhunga rukanda
kwibanda	boolean	ni ukuri	Shyira intumbero kuri modal iyo itangijwe.
kwerekana	boolean	ni ukuri	Erekana modal mugihe yatangijwe.

Uburyo

Uburyo butajegajega ninzibacyuho

Inzira zose za API ntizihuza kandi zitangira inzibacyuho . Basubira kumuhamagara mugihe inzibacyuho itangiye ariko itararangira . Mubyongeyeho, uburyo bwo guhamagarira ibice byinzibacyuho bizirengagizwa .

Reba inyandiko zacu za JavaScript kubindi bisobanuro .

`.modal(options)`

Koresha ibikubiyemo nkibisanzwe. Emera amahitamo object.

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

`.modal('toggle')`

Intoki ihinduranya modal. Garuka kumuhamagara mbere yuburyo bwerekanwe cyangwa bwihishe (ni ukuvuga mbere yuko ibyabaye shown.bs.modalcyangwa hidden.bs.modalibyabaye bibaho).

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

`.modal('show')`

Nintoki ifungura modal. Garuka kumuhamagara mbere yuburyo bwerekanwe (ni ukuvuga mbere yuko shown.bs.modalibyabaye biba).

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

`.modal('hide')`

Nintoki ihishe modal. Garuka kumuhamagara mbere yuburyo bwihishe (nukuvuga mbere yuko hidden.bs.modalibyabaye bibaho).

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

`.modal('handleUpdate')`

Nintoki uhindure imyanya yuburyo niba uburebure bwa modal ihinduka mugihe ifunguye (nukuvuga mugihe umuzingo ugaragara).

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

`.modal('dispose')`

Gusenya ikintu cyuburyo.

Ibyabaye

Moderi ya Bootstrap yerekana ibintu bike byo guhuza ibikorwa. Ibintu byose byabaye birasa kuri modal ubwayo (ni ukuvuga kuri <div class="modal">).

Ubwoko bwibyabaye	Ibisobanuro
kwerekana.bs.modal	Ibirori birasa ako kanya mugihe `show`urugero rwitwa. Niba byatewe no gukanda, ibintu byakanze birahari `relatedTarget`nkumutungo wibyabaye.
yerekanwe.bs.modal	Ibirori birukanwa mugihe modal yakozwe igaragara kubakoresha (izategereza ko inzibacyuho ya CSS irangira). Niba byatewe no gukanda, ibintu byakanze birahari `relatedTarget`nkumutungo wibyabaye.
guhisha.bs.modal	Ibi birori birahita bisohoka mugihe uburyo `hide`bwurugero bwahamagawe.
bihishe.bs.modal	Ibirori birukanwa mugihe modal yarangije guhishwa kumukoresha (izategereza ko CSS ihinduka).
guhisha Kurinda.bs.modal	Ibirori birukanwa mugihe modal yerekanwe, inyuma yayo ni `static`no gukanda hanze ya modal cyangwa urufunguzo rwo guhunga rukorwa hamwe na clavier ya clavier cyangwa `data-keyboard`gushiraho `false`.

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