Source

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" role="dialog">
  <div class="modal-dialog" role="document">
    <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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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>

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">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>

Bertikalki zentratuta

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">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>

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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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" role="dialog" 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 eta gehitzen duzula role="dialog", aria-labelledby="..."izenburu modalitateari erreferentzia eginez, to eta .modalberari . Gainera, zure elkarrizketa modalaren deskribapena eman dezakezu aktibatuta .role="document".modal-dialogaria-describedby.modal

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.

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</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`sakatu edo ihes tekla sakatzean modala ixten ez duen atzealde baterako.
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 atzealdea dagoenean `static`eta modaletik kanpo klik egitean edo ihes-tekla sakatzean abiarazten da.

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