in English

Modāls

Izmantojiet Bootstrap JavaScript modālo spraudni, lai savai vietnei pievienotu dialoglodziņus gaismas kārbām, lietotāju paziņojumiem vai pilnībā pielāgotam saturam.

Kā tas strādā

Pirms sākat darbu ar Bootstrap modālo komponentu, noteikti izlasiet šo, jo mūsu izvēlnes opcijas nesen ir mainījušās.

Modāļi ir veidoti, izmantojot HTML, CSS un JavaScript. Tie ir novietoti virs visa pārējā dokumentā un noņem ritināšanu, <body>lai tā vietā ritinātu modālais saturs.
Noklikšķinot uz modālā fona kolāža, modāls tiks automātiski aizvērts.
Bootstrap vienlaikus atbalsta tikai vienu modālo logu. Ligzdotie modāļi netiek atbalstīti, jo uzskatām, ka tie rada sliktu lietotāja pieredzi.
Modāļi izmanto position: fixed, kas dažkārt var nedaudz atšķirties no tā renderēšanas. Kad vien iespējams, novietojiet modālo HTML augstākā līmeņa pozīcijā, lai izvairītos no iespējamiem traucējumiem no citiem elementiem. Visticamāk, jums radīsies problēmas, ligzdojot a .modalcitā fiksētā elementā.
Atkal sakarā position: fixedar modālu izmantošanu mobilajās ierīcēs ir daži brīdinājumi. Detalizētu informāciju skatiet mūsu pārlūkprogrammas atbalsta dokumentos .
Tā kā HTML5 definē savu semantiku, HTML autofocusatribūts Bootstrap modālos neietekmē. Lai sasniegtu tādu pašu efektu, izmantojiet kādu pielāgotu JavaScript:

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

Šī komponenta animācijas efekts ir atkarīgs no prefers-reduced-motionmultivides vaicājuma. Skatiet mūsu pieejamības dokumentācijas sadaļu samazinātas kustības .

Turpiniet lasīt demonstrācijas un lietošanas vadlīnijas.

Piemēri

Tālāk ir sniegts statisks modāls piemērs (tas nozīmē, ka tā positionun displayir ignorētas). Iekļauta modālā galvene, modālais pamatteksts (nepieciešams padding) un modālā kājene (neobligāti). Mēs lūdzam jūs iekļaut modālas galvenes ar noraidīšanas darbībām, kad vien iespējams, vai nodrošināt citu skaidru noraidīšanas darbību.

<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 tiešraidē

Pārslēdziet strādājošu modālu demonstrāciju, noklikšķinot uz tālāk esošās pogas. Tas noslīdēs uz leju un pazudīs no lapas augšdaļas.

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

Statisks fons

Ja fona kolāža ir iestatīta uz statisku, modāls netiks aizvērts, noklikšķinot ārpus tā. Noklikšķiniet uz tālāk esošās pogas, lai to izmēģinātu.

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

Gara satura ritināšana

Ja modāļi kļūst pārāk gari lietotāja skata logam vai ierīcei, tie ritina neatkarīgi no pašas lapas. Izmēģiniet tālāk redzamo demonstrāciju, lai redzētu, ko mēs domājam.

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.

Varat arī izveidot ritināmu modālu, kas ļauj ritināt modālā pamattekstu, .modal-dialog-scrollablepievienojot .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>

Vertikāli centrēts

Pievienot .modal-dialog-centered, .modal-dialoglai vertikāli centrētu modālu.

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

Rīku padomi un uznirstošie elementi

Rīku padomus un uznirstošos logus pēc vajadzības var ievietot modālos. Kad modāļi ir aizvērti, visi rīka padomi un uznirstošie elementi arī tiek automātiski noraidīti.

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

Izmantojot režģi

Izmantojiet Bootstrap režģa sistēmu modālā, ligzdojot .container-fluid. .modal-bodyPēc tam izmantojiet parastās režģa sistēmas klases tāpat kā jebkur citur.

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

Vai jums ir vairākas pogas, kas aktivizē vienu un to pašu modāli ar nedaudz atšķirīgu saturu? Izmantojiet event.relatedTargetun HTML data-*atribūtus (iespējams , izmantojot jQuery ), lai mainītu modāla saturu atkarībā no tā, kura poga tika noklikšķināta.

Zemāk ir tiešraides demonstrācija, kam seko HTML un JavaScript piemēri. Lai iegūtu papildinformāciju, izlasiet modālo notikumu dokumentus , lai iegūtu sīkāku informāciju par 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)
})

Mainīt animāciju

$modal-fade-transformMainīgais nosaka transformācijas stāvokli .modal-dialogpirms modālās izbalēšanas animācijas, mainīgais $modal-show-transformnosaka transformāciju .modal-dialogmodālās izbalēšanas animācijas beigās.

Ja vēlaties, piemēram, tuvināt animāciju, varat iestatīt $modal-fade-transform: scale(.8).

Noņemt animāciju

Modāliem, kas vienkārši parādās, nevis izgaist, lai skatītu, noņemiet .fadeklasi no modālā marķējuma.

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

Dinamiskie augstumi

Ja modāla augstums mainās, kamēr tas ir atvērts, jums jāzvana $('#myModal').modal('handleUpdate'), lai pielāgotu modāla pozīciju, ja parādās ritjosla.

Pieejamība

Noteikti pievienojiet aria-labelledby="...", atsaucoties uz modālo nosaukumu, uz .modal. Turklāt varat sniegt modālā dialoga aprakstu, aria-describedbyizmantojot .modal. Ņemiet vērā, ka jums nav jāpievieno, role="dialog"jo mēs to jau pievienojam, izmantojot JavaScript.

YouTube videoklipu iegulšana

Lai iegultu YouTube videoklipus modālos, ir nepieciešams papildu JavaScript, kas nav Bootstrap, lai automātiski apturētu atskaņošanu un daudz ko citu. Lai iegūtu papildinformāciju, skatiet šo noderīgo Stack Overflow ziņu .

Izvēles izmēri

Modāļiem ir trīs izvēles izmēri, kas ir pieejami modifikatoru klasēs, lai tos ievietotu .modal-dialog. Šie izmēri tiek aktivizēti noteiktos pārtraukuma punktos, lai izvairītos no horizontālām ritjoslām šaurākos skata portos.

Izmērs	Klase	Modālais maksimālais platums
Mazs	`.modal-sm`	`300px`
Noklusējums	Nav	`500px`
Liels	`.modal-lg`	`800px`
Īpaši liels	`.modal-xl`	`1140px`

Mūsu noklusējuma modāls bez modifikatoru klases veido “vidēja” izmēra modālu.

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

Lietošana

Modālais spraudnis pēc pieprasījuma pārslēdz jūsu slēpto saturu, izmantojot datu atribūtus vai JavaScript. Tas arī papildina noklusējuma ritināšanas darbību ignorēšanai un ģenerē .modal-openklikšķa apgabalu parādīto modāļu noraidīšanai, noklikšķinot ārpus modāla.<body>.modal-backdrop

Izmantojot datu atribūtus

Aktivizējiet modālu, neierakstot JavaScript. Iestatiet data-toggle="modal"kontroliera elementu, piemēram, pogu, kopā ar data-target="#foo"vai href="#foo", lai atlasītu konkrētu modālu, lai pārslēgtu.

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

Izmantojot JavaScript

Izsauciet modālu ar ID myModalar vienu JavaScript rindiņu:

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

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-, tāpat kā data-backdrop="".

Vārds	Tips	Noklusējums	Apraksts
fons	Būla vērtība vai virkne`'static'`	taisnība	Ietver modāla fona elementu. Vai arī norādiet `static`fona kolāžu, kas neaizver modālu, noklikšķinot.
tastatūra	Būla	taisnība	Aizver modālu, kad tiek nospiests evakuācijas taustiņš
fokuss	Būla	taisnība	Inicializācijas laikā fokuss tiek likts uz modālu.
parādīt	Būla	taisnība	Parāda modālu inicializācijas laikā.

Metodes

Asinhronās metodes un pārejas

Visas API metodes ir asinhronas un sāk pāreju . Viņi atgriežas pie zvanītāja, tiklīdz ir sākta pāreja, bet pirms tās beigām . Turklāt pārejas komponenta metodes izsaukums tiks ignorēts .

Plašāku informāciju skatiet mūsu JavaScript dokumentācijā .

`.modal(options)`

Aktivizē jūsu saturu kā modālu. Pieņem izvēles opcijas object.

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

`.modal('toggle')`

Manuāli pārslēdz modālu. Atgriežas pie zvanītāja, pirms modāls ir faktiski parādīts vai paslēpts (ti, pirms notiek notikums shown.bs.modalvai ).hidden.bs.modal

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

`.modal('show')`

Manuāli atver modālu. Atgriežas pie zvanītāja, pirms modāls ir faktiski parādīts (ti, pirms shown.bs.modalnotikuma).

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

`.modal('hide')`

Manuāli slēpj modālu. Atgriežas pie zvanītāja, pirms modāls ir faktiski paslēpts (ti, pirms hidden.bs.modalnotikuma).

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

`.modal('handleUpdate')`

Manuāli pārregulējiet modāļa pozīciju, ja modāla augstums mainās, kamēr tas ir atvērts (ti, ja parādās ritjosla).

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

`.modal('dispose')`

Iznīcina elementa modālu.

Pasākumi

Bootstrap modālā klase atklāj dažus notikumus, lai piesaistītu modālo funkcionalitāti. Visi modālie notikumi tiek aktivizēti uz pašu modālu (ti, uz <div class="modal">).

Pasākuma veids	Apraksts
show.bs.modal	Šis notikums tiek aktivizēts nekavējoties, kad `show`tiek izsaukta instances metode. Ja to izraisījis klikšķis, noklikšķinātais elements ir pieejams kā `relatedTarget`notikuma īpašums.
parādīts.bs.modal	Šis notikums tiek aktivizēts, kad modāls ir padarīts redzams lietotājam (pagaidīs, kamēr CSS pārejas tiks pabeigtas). Ja to izraisījis klikšķis, noklikšķinātais elements ir pieejams kā `relatedTarget`notikuma īpašums.
slēpt.bs.modal	Šis notikums tiek aktivizēts nekavējoties, kad `hide`ir izsaukta instances metode.
slēpts.bs.modal	Šis notikums tiek aktivizēts, kad modāls ir beidzis slēpt no lietotāja (pagaidīs, līdz CSS pārejas tiks pabeigtas).
slēptPrevented.bs.modal	Šis notikums tiek aktivizēts, kad tiek parādīts modāls, tā fons `static`un tiek veikts klikšķis ārpus modāla vai tiek nospiests atkāpšanās taustiņš ar tastatūras opciju vai `data-keyboard`iestatītu uz `false`.

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