in English

Modala

Erabili Bootstrap-en JavaScript plugin-a zure webgunean argi-kutxak, erabiltzaileen jakinarazpenak edo eduki guztiz pertsonalizatuetarako elkarrizketa-koadroak gehitzeko.

Nola dabil

Bootstrap-en osagai modalarekin hasi aurretik, ziurtatu honako hau irakurtzea gure menu-aukerak duela gutxi aldatu direlako.

Modalak HTML, CSS eta JavaScriptekin eraikitzen dira. Dokumentuko gainontzeko guztiaren gainean kokatzen dira eta korritua kenduko dute, <body>eduki modala korritu beharrean.
"Hondoa" modalean klik eginez automatikoki modala itxiko da.
Bootstrap-ek leiho modal bakarra onartzen du aldi berean. Habiaratutako modalak ez dira onartzen erabiltzailearen esperientzia txarrak direla uste baitugu.
Modalek erabiltzen dute position: fixed, eta batzuetan bere errendatzeari dagokionez zehatz samarra izan daiteke. Ahal den guztietan, jarri zure HTML modala goi-mailako posizio batean, beste elementu batzuen interferentziak ekiditeko. .modalArazoak izango dituzu beste elementu finko batean habiatzerakoan .
Berriro ere, position: fixedgailu mugikorretarako modalak erabiltzean ohar batzuk daude. Ikusi gure arakatzailearen laguntza-dokumentuak xehetasunetarako.
HTML5-ek bere semantika definitzen duen moduan, HTML autofocusatributuak ez du eraginik Bootstrap modaletan. Efektu bera lortzeko, erabili JavaScript pertsonalizatu batzuk:

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

Osagai honen animazio-efektua prefers-reduced-motionmultimedia kontsultaren menpe dago. Ikusi gure irisgarritasun-dokumentazioaren mugimendu murriztuaren atala .

Jarraitu irakurtzen demoak eta erabilera-gidalerroak.

Adibideak

Jarraian, adibide modal estatikoposition bat dago (esan nahi du bere eta displaygainidatzi egin dira). Goiburu modala, gorputz modala (beharrezkoa padding) eta orri-oina modala (aukerakoa) daude barne. Ahal den guztietan baztertzeko ekintzekin goiburu modalak sartzea edo baztertzeko beste ekintza esplizitu bat ematea eskatzen dugu.

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

Zuzeneko demoa

Aldatu funtzionatzen duen demo modal bat beheko botoian klik eginez. Behera lerratu eta orriaren goialdetik lausotuko da.

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

Atzealde estatikoa

Atzealdea estatiko gisa ezartzen denean, modala ez da itxiko kanpoan klik egitean. Egin klik beheko botoian probatzeko.

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

Eduki luzea mugitzea

Modalak erabiltzailearen ikuspegirako edo gailurako luzeegi bihurtzen direnean, orrialdetik independenteki mugitzen dira. Probatu beheko demoa zer esan nahi dugun ikusteko.

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.

Gorputz modala korritzeko aukera ematen duen modal korrigarri bat ere sor .modal-dialog-scrollabledezakezu .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>

Bertikalki zentratuta

Gehitu .modal-dialog-centeredto .modal-dialogmodala bertikalki zentratzeko.

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

Tresna-aholkuak eta popovers

Tresna-aholkuak eta popover - ak modalen barruan jar daitezke beharren arabera. Modalak ixten direnean, barruan dauden tresna-aholkuak eta popover-ak ere automatikoki baztertzen dira.

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

Sarea erabiliz

Erabili Bootstrap sareta sistema modal baten .container-fluidbarruan habia eginez .modal-body. Ondoren, erabili sare-sistemako klase arruntak beste inon bezala.

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

Eduki ezberdinekin modal bera abiarazten duten botoi mordoa al dituzu? Erabili event.relatedTargeteta HTML data-*atributuak (baliteke jQuery bidez ) modalaren edukia aldatzeko, klikatu den botoiaren arabera.

Jarraian zuzeneko demo bat dago eta jarraian HTML eta JavaScript adibideekin. Informazio gehiago nahi izanez gero, irakurri modal gertaeren dokumentuak 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)
})

Aldatu animazioa

Aldagaiak desagertze-animazioaren aurreko $modal-fade-transformeraldaketa-egoera zehazten du , aldagaiak desagertze-animazioaren amaierako eraldaketa zehazten du ..modal-dialog$modal-show-transform.modal-dialog

Adibidez, zoom-in animazio bat nahi baduzu, ezar dezakezu $modal-fade-transform: scale(.8).

Kendu animazioa

Ikusteko lausotu beharrean agertzen diren modaletarako, kendu .fadeklasea marka modaletik.

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

Altuera dinamikoak

Modal baten altuera irekita dagoen bitartean aldatzen bada, deitu beharko zenuke $('#myModal').modal('handleUpdate')modalaren posizioa berriro doitzeko, korritze-barra agertzen bada.

Irisgarritasuna

Ziurtatu aria-labelledby="...", izenburu modalari erreferentzia eginez, gehitzen duzula .modal. Gainera, zure elkarrizketa modalaren deskribapena eman dezakezu aria-describedbyaktibatuta .modal. Kontuan izan ez duzula gehitu beharrik role="dialog"jada JavaScript bidez gehitzen dugulako.

YouTube bideoak txertatzea

YouTube-ko bideoak modaletan txertatzeak Bootstrap-en ez dagoen JavaScript gehigarria behar du erreprodukzioa automatikoki gelditzeko eta gehiago. Ikusi Stack Overflow argitalpen lagungarri hau informazio gehiago lortzeko.

Aukerako neurriak

Modalek aukerako hiru tamaina dituzte, modifikatzaile klaseen bidez eskuragarri .modal-dialog. Tamaina hauek eten-puntu batzuetan sartzen dira bistara estuagoetan korritze-barra horizontalak saihesteko.

Tamaina	Klasea	Gehienezko zabalera modala
Txikia	`.modal-sm`	`300px`
Lehenetsia	Bat ere ez	`500px`
Handia	`.modal-lg`	`800px`
Oso handia	`.modal-xl`	`1140px`

Gure modifikatzaile klaserik gabeko modal lehenetsiak tamaina "ertaineko" modala osatzen du.

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

Erabilera

Plugin modalak zure ezkutuko edukia aldatzen du eskaeraren arabera, datu-atributuen edo JavaScript bidez. Era berean, korritze-portaera lehenetsia gainidazteko gehitzen .modal-opendu eta klik-eremu bat sortzen du, erakutsitako modalak baztertzeko, modaletik kanpo sakatzean.<body>.modal-backdrop

Datu-atributuen bidez

Aktibatu modal bat JavaScript idatzi gabe. Ezarri data-toggle="modal"kontrolagailu-elementu batean, botoi batean adibidez, data-target="#foo"edo href="#foo"aktibatzeko modal zehatz bat bideratzeko.

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

JavaScript bidez

Deitu id duen modal myModalbat JavaScript lerro bakar batekin:

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

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-backdrop="".

Izena	Mota	Lehenetsia	Deskribapena
atzealdea	boolearra edo katea`'static'`	egia	Atzeko plano-elementu modala dakar. Bestela, zehaztu `static`klik egitean modala ixten ez duen atzeko planoa.
teklatua	boolearra	egia	Ihes tekla sakatzen denean modala ixten du
fokua	boolearra	egia	Fokua modalean jartzen du hasieratzen denean.
erakutsi	boolearra	egia	Hasieratzen denean modala erakusten du.

Metodoak

Metodo asinkronoak eta trantsizioak

API metodo guztiak asinkronoak dira eta trantsizio bat hasten dute . Trantsizioa hasi bezain laster baina amaitu baino lehen itzultzen dira deitzailearengana . Gainera, trantsizio-osagai baten metodo-dei bati ez ikusi egingo zaio .

Ikus gure JavaScript dokumentazioa informazio gehiago lortzeko .

`.modal(options)`

Zure edukia modal gisa aktibatzen du. Aukerako aukerak onartzen ditu object.

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

`.modal('toggle')`

Modal bat eskuz aldatzen du. Deitzaileari itzultzen zaio modala benetan erakutsi edo ezkutatu aurretik (hau da, shown.bs.modaledo hidden.bs.modalgertaera gertatu baino lehen).

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

`.modal('show')`

Eskuz modal bat irekitzen du. Deitzaileari itzultzen zaio modala benetan erakutsi aurretik (hau da, shown.bs.modalgertaera gertatu baino lehen).

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

`.modal('hide')`

Eskuz ezkutatzen du modal bat. Deitzaileari itzultzen zaio modala benetan ezkutatu aurretik (hau da, hidden.bs.modalgertaera gertatu baino lehen).

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

`.modal('handleUpdate')`

Eskuz berriro egokitu modalaren posizioa modal baten altuera aldatzen bada irekita dagoen bitartean (hau da, korritze-barra agertzen bada).

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

`.modal('dispose')`

Elementu baten modala suntsitzen du.

Gertaerak

Bootstrap-en klase modalak funtzionalitate modalean konektatzeko gertaera batzuk erakusten ditu. Gertaera modal guztiak modalean bertan jaurtitzen dira (hau da, <div class="modal">).

Gertaera mota	Deskribapena
ikuskizuna.bs.modala	Gertaera hau berehala abiarazten da `show`instantzia-metodoa deitzen denean. Klik batek eragindakoa bada, klikatutako elementua `relatedTarget`gertaeraren jabetza gisa erabilgarri dago.
erakusten.bs.modala	Gertaera hau modua erabiltzailearentzat ikusgai jarri denean abiarazten da (CSS trantsizioak amaitu arte itxarongo da). Klik batek eragindakoa bada, klikatutako elementua `relatedTarget`gertaeraren jabetza gisa erabilgarri dago.
ezkutatu.bs.modal	Gertaera hau berehala abiarazten da `hide`instantzia-metodoa deitzen denean.
ezkutuan.bs.modala	Gertaera hau modua erabiltzaileari ezkutatzen amaitzen denean abiarazten da (CSS trantsizioak amaitu arte itxarongo da).
hidePrevented.bs.modal	Gertaera hau modala erakusten denean, bere atzeko planoa dagoenean `static`eta modaletik kanpo klik egitean edo ihes-tekla sakatzean egiten da teklatuaren aukerarekin edo `data-keyboard`ezarrita dagoenean `false`.

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