Saltatu eduki nagusira Saltatu dokumentuen nabigaziora
in English

Modala

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

Orrialde honetan

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:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.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.

Izenburu modala

Gorputzaren testu modala hemen doa.

<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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-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-bs-toggle="modal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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-bs-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 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-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-bs-*atributuak modalaren edukia aldatzeko, klik egin 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-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <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-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

Aldatu modalen artean

Aldatu modal anitzen artean data-bs-targeteta data-bs-toggleatributuen kokapen adimentsu batekin. Esate baterako, pasahitza berrezartzeko modua alda dezakezu jada irekita dagoen saioa hasteko modalitate batetik. Kontuan izan hainbat modal ezin direla aldi berean ireki; metodo honek bi modal bereizten ditu.

Ireki lehen modala 
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

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

Pantaila osoko modala

Beste baliogabetze bat erabiltzailearen ikuspegia estaltzen duen modal bat agertzeko aukera da, gailu batean jartzen diren modifikatzaile klaseen bidez eskuragarri .modal-dialog.

Klasea Eskuragarritasuna
.modal-fullscreen Beti
.modal-fullscreen-sm-down Behean576px
.modal-fullscreen-md-down Behean768px
.modal-fullscreen-lg-down Behean992px
.modal-fullscreen-xl-down Behean1200px
.modal-fullscreen-xxl-down Behean1400px 
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

Sass

Aldagaiak

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        rgba($black, .2);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

Begizta

Pantaila osoko modu erreaktiboak$breakpoints maparen eta begizta baten bidez sortzen dira scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

Erabilera

Plugin modalak zure ezkutuko edukia aldatzen du eskaeraren arabera, datu-atributuen edo JavaScript bidez. Era berean, korritze-jokaera lehenetsia gainidazten du eta bat sortzen du .modal-backdropklik-eremu bat eskaintzeko erakutsitako modalak baztertzeko, modaletik kanpo sakatzean.

Datu-atributuen bidez

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

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

JavaScript bidez

Sortu modal bat JavaScript lerro bakar batekin:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Aukerak

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

Izena Mota Lehenetsia Deskribapena
backdrop boolearra edo katea'static' true Atzeko plano-elementu modala dakar. Bestela, zehaztu staticklik egitean modala ixten ez duen atzeko planoa.
keyboard boolearra true Ihes tekla sakatzen denean modala ixten du
focus boolearra true Fokua modalean jartzen du hasieratzen denean.

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 .

Pasatzeko aukerak

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

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

txandakatu

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.toggle()

erakutsi

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

myModal.show()

Gainera, DOM elementu bat pasa dezakezu gertaera modaletan jaso daitekeen argumentu gisa ( relatedTargetpropietate gisa).

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

ezkutatu

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

myModal.hide()

heldulekuaEguneratu

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

myModal.handleUpdate()

bota

Elementu baten modala suntsitzen du. (DOM elementuan gordetako datuak kentzen ditu)

myModal.dispose()

getInstance

Metodo estatikoa DOM elementu bati lotutako instantzia modala lortzeko aukera ematen duena

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

getOrCreateInstance

Metodo estatikoa DOM elementu batekin erlazionatutako instantzia modala lortzeko edo berri bat sortzeko aukera ematen duena, hasieratu ez bazen.

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

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
show.bs.modal Gertaera hau berehala abiarazten da showinstantzia-metodoa deitzen denean. Klik batek eragindakoa bada, klikatutako elementua relatedTargetgertaeraren jabetza gisa erabilgarri dago.
shown.bs.modal 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.
hide.bs.modal Gertaera hau berehala abiarazten da hideinstantzia-metodoa deitzen denean.
hidden.bs.modal 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-bs-keyboardezarrita dagoenean false. 
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})