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.

Gorputz modala korritzeko aukera ematen duen modal korrigarri bat ere sor .modal-dialog-scrollabledezakezu .modal-dialog.

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

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 staticklik 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 showinstantzia-metodoa deitzen denean. Klik batek eragindakoa bada, klikatutako elementua relatedTargetgertaeraren 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 relatedTargetgertaeraren jabetza gisa erabilgarri dago.
ezkutatu.bs.modal Gertaera hau berehala abiarazten da hideinstantzia-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 staticeta modaletik kanpo klik egitean edo ihes-tekla sakatzean egiten da teklatuaren aukerarekin edo data-keyboardezarrita dagoenean false.
$('#myModal').on('hidden.bs.modal', function (event) {
  // do something...
})