in English

Modaalne

Kasutage Bootstrapi JavaScripti modaalset pistikprogrammi, et lisada oma saidile dialoogid valguskastide, kasutajate märguannete või täielikult kohandatud sisu jaoks.

Kuidas see töötab

Enne Bootstrapi modaalkomponendiga alustamist lugege kindlasti järgmist, kuna meie menüüvalikud on hiljuti muutunud.

Modaalid on üles ehitatud HTML-i, CSS-i ja JavaScriptiga. Need asuvad dokumendis kõige muu kohal ja eemaldavad kerimise, <body>nii et selle asemel keritakse modaalset sisu.
Klõpsates modaalsel taustadekoratsioonil, suletakse modaal automaatselt.
Bootstrap toetab korraga ainult ühte modaalset akent. Pesastatud modaale ei toetata, kuna usume, et need on kehvad kasutuskogemused.
Modaalid kasutavad position: fixed, mis võib mõnikord olla selle renderdamisel pisut eriline. Võimaluse korral asetage oma modaalne HTML kõrgeimale tasemele, et vältida teiste elementide võimalikke häireid. Tõenäoliselt tekib probleeme .modalteise fikseeritud elemendi pesastamisel.
Jällegi, tänu position: fixed, on mobiilseadmetes modaalide kasutamisel mõned hoiatused. Vaadake üksikasju meie brauseri tugidokumentidest .
HTML5 semantika määratlemise tõttu ei mõjuta HTML-i atribuut Bootstrapi modaalides autofocus. Sama efekti saavutamiseks kasutage mõnda kohandatud JavaScripti:

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

Selle komponendi animatsiooniefekt sõltub prefers-reduced-motionmeediumipäringust. Vaadake meie juurdepääsetavuse dokumentatsiooni vähendatud liikumise jaotist .

Jätkake demode ja kasutusjuhiste lugemist.

Näited

Allpool on staatiline modaalne näide (see tähendab, et selle positionja displayon tühistatud). Kaasatud on modaalne päis, modaalne keha (nõutav jaoks padding) ja modaalne jalus (valikuline). Palume teil võimaluse korral lisada modaalsed päised koos loobumistoimingutega või esitada mõni muu selgesõnaline loobumistoiming.

<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

Lülitage töötav modaaldemo sisse, klõpsates alloleval nupul. See libiseb alla ja tuhmub lehe ülaosast sisse.

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

Staatiline taust

Kui taust on seatud staatiliseks, ei sulgu modaal sellest väljaspool klõpsates. Proovimiseks klõpsake alloleval nupul.

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

Pika sisu kerimine

Kui modaalid muutuvad kasutaja vaateava või seadme jaoks liiga pikaks, kerivad need lehest endast sõltumatult. Proovige allolevat demo, et näha, mida me mõtleme.

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.

Saate luua ka keritava modaali, mis võimaldab kerida modaalkeha, lisades .modal-dialog-scrollablesellele .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>

Vertikaalselt tsentreeritud

Modaali vertikaalseks keskpunktiks .modal-dialog-centeredlisamine ..modal-dialog

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

Tööriistanõuanded ja hüpikaknad

Vajadusel saab modaalidesse paigutada tööriistavihjeid ja hüpikaknaid . Kui modaalid on suletud, jäetakse automaatselt kõrvale ka kõik tööriistaspikrid ja hüpikaknad.

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

Võre kasutamine

Kasutage modaalis Bootstrapi ruudustikusüsteemi , pesatades .container-fluid. .modal-bodySeejärel kasutage tavalisi ruudustikusüsteemi klasse nagu mujal.

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

Kas teil on hunnik nuppe, mis kõik käivitavad sama modaali ja veidi erineva sisuga? Kasutage event.relatedTargetja HTML - data-*atribuute (võimalik , et jQuery kaudu ), et muuta modaali sisu sõltuvalt sellest, millisel nupul klõpsati.

Allpool on reaalajas demo, millele järgneb HTML-i ja JavaScripti näide. Lisateabe saamiseks lugege üksikasju kohta modaalsete sündmuste dokumentidestrelatedTarget .

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

Muuda animatsiooni

Muutuja $modal-fade-transformmäärab teisendusoleku .modal-dialogenne modaalset sumbuvat animatsiooni, $modal-show-transformmuutuja määrab teisenduse .modal-dialogmodaalse sumbumise animatsiooni lõpus.

Kui soovite näiteks suumimisanimatsiooni, saate määrata $modal-fade-transform: scale(.8).

Eemalda animatsioon

Modaalide puhul, mis lihtsalt ilmuvad, mitte ei tuhmu vaatamiseks, eemaldage .fadeklass oma modaalimärgistusest.

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

Dünaamilised kõrgused

Kui modaali kõrgus muutub, kui see on avatud, peaksite helistama $('#myModal').modal('handleUpdate'), et modaali asukohta uuesti reguleerida juhuks, kui ilmub kerimisriba.

Juurdepääsetavus

Kindlasti lisage aria-labelledby="...", viidates modaalsele pealkirjale, .modal. Lisaks võite anda oma modaalse dialoogi aria-describedbykirjelduse .modal. Pange tähele, et te ei pea lisama, role="dialog"kuna lisame selle juba JavaScripti kaudu.

YouTube'i videote manustamine

YouTube'i videote modaalidesse manustamiseks on vaja täiendavat JavaScripti, mis ei ole Bootstrapis, et taasesitus automaatselt peatada ja palju muud. Lisateabe saamiseks vaadake seda kasulikku Stack Overflow postitust .

Valikulised suurused

Modaalidel on kolm valikulist suurust, mis on saadaval modifikaatoriklasside kaudu, mis asetatakse .modal-dialog. Need suurused rakenduvad teatud murdepunktides, et vältida kitsamates vaateavades horisontaalseid kerimisribasid.

Suurus	Klass	Modaalne maksimaalne laius
Väike	`.modal-sm`	`300px`
Vaikimisi	Mitte ühtegi	`500px`
Suur	`.modal-lg`	`800px`
Väga suur	`.modal-xl`	`1140px`

Meie vaikimisi modaal ilma modifikaatorita klassi moodustab "keskmise" suurusega modaali.

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

Kasutamine

Modaalne pistikprogramm lülitab teie peidetud sisu nõudmisel andmeatribuutide või JavaScripti kaudu sisse. Samuti lisab .modal-opensee <body>kerimise vaikekäitumise alistamise ja loob .modal-backdropklõpsamisala kuvatavate modaalide kõrvalejätmiseks, kui klõpsate väljaspool modaali.

Andmeatribuutide kaudu

Aktiveerige modaal JavaScripti kirjutamata. Seadistage data-toggle="modal"kontrolleri element, nagu nupp, koos data-target="#foo"või href="#foo", et sihtida ümberlülitamiseks konkreetset modaali.

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

JavaScripti kaudu

Kutsuge modaali ID myModal-ga ühe JavaScripti reaga:

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

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-backdrop="".

Nimi	Tüüp	Vaikimisi	Kirjeldus
taustaks	tõeväärtus või string`'static'`	tõsi	Sisaldab modaalset taustaelementi. Teise võimalusena määrake `static`taust, mis ei sulge modaali klõpsamisel.
klaviatuur	tõeväärtus	tõsi	Sulgeb modaali, kui vajutada paoklahvi
keskenduda	tõeväärtus	tõsi	Initsialiseerimisel keskendutakse modaalile.
näidata	tõeväärtus	tõsi	Initsialiseerimisel kuvatakse modaal.

meetodid

Asünkroonsed meetodid ja üleminekud

Kõik API meetodid on asünkroonsed ja alustavad üleminekut . Nad naasevad helistaja juurde kohe pärast ülemineku algust, kuid enne selle lõppu . Lisaks ignoreeritakse üleminekukomponendi meetodikutset .

Lisateabe saamiseks vaadake meie JavaScripti dokumentatsiooni .

`.modal(options)`

Aktiveerib teie sisu modaalina. Aktsepteerib valikulisi valikuid object.

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

`.modal('toggle')`

Lülitab modaali käsitsi ümber. Naaseb helistaja juurde enne, kui modaal on tegelikult näidatud või peidetud (st enne shown.bs.modalvõi hidden.bs.modalsündmuse toimumist).

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

`.modal('show')`

Avab modaali käsitsi. Naaseb helistaja juurde enne, kui modaali on tegelikult näidatud (st enne shown.bs.modalsündmuse toimumist).

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

`.modal('hide')`

Peidab modaali käsitsi. Naaseb helistaja juurde enne, kui modaal on tegelikult peidetud (st enne hidden.bs.modalsündmuse toimumist).

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

`.modal('handleUpdate')`

Reguleerige modaali asendit käsitsi, kui modaali kõrgus muutub avatud olekus (st kui ilmub kerimisriba).

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

`.modal('dispose')`

Hävitab elemendi modaali.

Sündmused

Bootstrapi modaalklass paljastab mõned sündmused modaalse funktsionaalsusega ühendamiseks. Kõik modaalsündmused käivitatakse modaali enda (st <div class="modal">) suunas.

Sündmuse tüüp	Kirjeldus
show.bs.modal	See sündmus käivitub kohe, kui `show`eksemplari meetod kutsutakse. Kui selle põhjuseks on klõps, on klõpsatud element saadaval `relatedTarget`sündmuse atribuudina.
näidatud.bs.modal	See sündmus käivitatakse, kui modaal on kasutajale nähtavaks tehtud (ootab CSS-i üleminekut). Kui selle põhjuseks on klõps, on klõpsatud element saadaval `relatedTarget`sündmuse atribuudina.
peida.bs.modal	See sündmus käivitatakse kohe, kui `hide`eksemplari meetod on välja kutsutud.
peidetud.bs.modal	See sündmus käivitatakse, kui modaal on kasutaja eest peitmise lõpetanud (ootab, kuni CSS-i üleminekud on lõpule viidud).
peidaPrevented.bs.modal	See sündmus käivitatakse, kui modaali kuvatakse, selle taustaks on `static`ja klõpsatakse väljaspool modaali või tehakse paoklahvi vajutamine klaviatuurivalikuga või `data-keyboard`väärtusele `false`.

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