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.

<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 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">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">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 zenuke myModal.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>

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`	Behean`576px`
`.modal-fullscreen-md-down`	Behean`768px`
`.modal-fullscreen-lg-down`	Behean`992px`
`.modal-fullscreen-xl-down`	Behean`1200px`
`.modal-fullscreen-xxl-down`	Behean`1400px`

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

Txandakatu

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>

Baztertu

Kanporatzea modukodata botoi bateko atributuarekin lor daiteke, behean erakusten den moduan:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

edo modaletik kanpokodata-bs-target botoi batean behean erakusten den moduan erabiliz :

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>

Modal bat baztertzeko bi moduak onartzen badira ere, kontuan izan modal batetik kanpo uztea ez datorrela bat WAI-ARIA modal elkarrizketa-koadroaren diseinu-ereduarekin . Egin hau zure ardurapean.

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 `static`klik 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 `show`instantzia-metodoa deitzen denean. Klik batek eragindakoa bada, klikatutako elementua `relatedTarget`gertaeraren 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 `relatedTarget`gertaeraren jabetza gisa erabilgarri dago.
`hide.bs.modal`	Gertaera hau berehala abiarazten da `hide`instantzia-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 `static`eta modaletik kanpo klik egitean edo ihes-tekla sakatzean egiten da teklatuaren aukerarekin edo `data-bs-keyboard`ezarrita dagoenean `false`.

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})