Modal rehegua

Eipuru Bootstrap JavaScript modal plugin emoĩ hag̃ua ñe’ẽñemi nde tenda’ípe tesape’arã, puruhára momarandurã térã contenido personalizado completo-pe g̃uarã.

Ko páhinape

Mba’éichapa omba’apo

Eñepyrũ mboyve Bootstrap componente modal reheve, emoñe’ẽ katuete ko’ãva ñande menú opción nda’aréi iñambuégui.

Umi modalidad oñemopuꞌa HTML, CSS ha JavaScript rupive. Oñemohenda hikuái opa mbaꞌe ambue kuatiaroguépe ári ha oipeꞌa desplazamiento-gui <body>ikatu hag̃uáicha contenido modal ojedesplaza hendaguépe.
Ojepysóramo “telón de fondo” modal rehe, oñembotýta ijeheguiete pe modal.
Bootstrap oipytyvõ peteĩ ventána modal añoite peteĩ jeýpe. Umi modal anidado ndojeguerohorýi rogueroviaháicha ha’eha puruhára reko vai.
Modal oipuru position: fixed, ikatúva sapy’ánte ha’e peteĩ mba’e particular’imi irrenderización rehegua. Ikatu jave, emoĩ ne HTML modal peteĩ tenda yvateguápe ani hag̃ua ojejoko ambue elemento-kuéragui. Oiméne rejuhúta mba’e’oka remoĩ jave peteĩ .modalambue elemento fijo ryepýpe.
Peteî jey, debido a position: fixed, oî algunas advertencias oiporúvo modal umi dispositivo móvil-pe. Ehecha ore kuatiañe’ẽ pytyvõrã kundahára rehegua reikuaa hag̃ua mba’ekuaarã.
Mbaꞌeichaitépa HTML5 omboheko iñeꞌepykuaa, HTML atributo ndoguerekói mbaꞌeveichagua mbaꞌekuaarã umiautofocus modal Bootstrap-pe. Ojehupyty hag̃ua peteĩchagua efecto, eipuru peteĩ JavaScript jeporupyre:

const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})

Pe efecto animación rehegua ko componente rehegua odepende pe prefers-reduced-motionconsulta medio rehegua rehe. Ehecha pe sección movimiento reducido ore kuatia accesibilidad rehegua .

Emoñe’ẽ meme umi demostración ha jepururã ñe’ẽmondo rehegua.

Tembiecharã

Iguýpe oĩ peteĩ techapyrã modal estáticoposition (he’iséva i ha displayoñemboyke hague). Oike ipype iñakãrapuꞌa modal, retepy modal (oñeikotevẽva padding) ha ipypegua modal (opcional). Rojerure remoĩ hag̃ua umi iñakãrapu’ã modal orekóva tembiapo ñemboyke ikatu jave, térã eme’ẽ ambue tembiapo ñemboyke hesakãva.

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

Demostración en vivo rehegua

Embohasa peteĩ demostración modal omba’apóva eitykuévo pe botón iguýpe. Oguejýta ha oñedesvanece vaʼerã pe páhina yvate guive.

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

Telón de fondo estático rehegua

Oñemohenda jave telón de fondo estático-pe, modal noñembotymoꞌãi ojepyso jave okápe. Emboguejy pe botón oĩva iguýpe reñehaʼã hag̃ua.

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

Ojedesplazávo contenido ipukúva

Umi modal ipukuetereíramo puruhára jehechaukaha térã tembipururãme g̃uarã, ojedesplaza ijeheguiete pe páhinagui voi. Eñeha’ã pe demostración oĩva ko’ápe rehecha hag̃ua mba’épa ja’ese.

Ikatu avei ejapo peteĩ modal ojedesplazakuaáva ohejáva ojedesplaza modal retepy emoĩvo .modal-dialog-scrollable..modal-dialog

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Oñecentra verticalmente

Oñembojoapy .modal-dialog-centereda .modal-dialogoñecentra hagua verticalmente pe modal.

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

Tembipururã ñe’ẽmondo ha popovers

Umi tembipuru’i ñe’ẽmondo ha umi popover ikatu oñemoĩ modal ryepýpe oñeikotevẽháicha. Oñembotývo umi modal, oñemboyke avei ijeheguiete oimeraẽva tembipururã ñe’ẽmondo ha umi popover oĩva hyepýpe.

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" 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="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

Oipurúvo pe cuadrícula

Eipuru sistema cuadrícula Bootstrap peteĩ modal ryepýpe emoĩvo anidado .container-fluidryepýpe .modal-body. Upéi, eipuru umi clase sistema red normal rehegua rejapoháicha ambue hendápe.

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

¿Reguerekópa peteĩ aty umi botón opavave ombohapéva peteĩchagua modal orekóva contenido iñambue’imiva? Eipuru event.relatedTargetha HTML data-bs-*atributo emoambue hag̃ua modal mbaꞌekuaarã odependéva mbaꞌe botón rehepa ojepyso.

Iguýpe oĩ peteĩ demostración en vivo hapykuéri techapyrã HTML ha JavaScript. Ojeikuaave hag̃ua, emoñe’ẽ umi docs eventos modal rehegua umi detalle rehegua relatedTarget.

html rehegua

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

const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
  // Button that triggered the modal
  const button = event.relatedTarget
  // Extract info from data-bs-* attributes
  const 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.
  const modalTitle = exampleModal.querySelector('.modal-title')
  const modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = `New message to ${recipient}`
  modalBodyInput.value = recipient
})

Ombohasa umi modal apytépe

Embohasa heta modal apytépe oguerekóva algún colocación iñaranduva umi atributo data-bs-targetha rehegua. data-bs-toggleTechapyrã, ikatu emoambue peteĩ modal ñe’ẽñemi jegueru jey peteĩ modal jeike ojepe’ámava ryepýgui. Eñatendéke heta modal ndaikatúi ojepe’a peteĩ jave —ko método ombohasa rei mokõi modal añónte apytépe.

Ojepe’a peteĩha modal

html rehegua

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

Omoambue animación

Pe $modal-fade-transformmbaꞌekuaarã ohechakuaa mbaꞌeichaitépa oñembohasa .modal-dialogpe animación modal fade-in mboyve, pe $modal-show-transformmbaꞌekuaarã ohechakuaa pe transformada de .modal-dialogopakuévo pe modal fade-in animación.

Oipotáramo techapyrãramo peteĩ taꞌãngamýi oñembotuichave hag̃ua, ikatu emohenda $modal-fade-transform: scale(.8).

Ojepe’a pe animación

Umi modal ojehechaukáva simplemente oñedesvanece rangue ojehecha hag̃ua, eipe’a pe .fadeclase nde marcado modal-gui.

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

Alturas dinámicas rehegua

Peteĩ modal yvatekuépe oñemoambuéramo ojepeꞌa aja, ehenóivaꞌerã myModal.handleUpdate()emohenda jey hag̃ua modal ñemohenda ojehecharamo peteĩ barra de desplazamiento.

Accesibilidad rehegua

Emoĩ katuete aria-labelledby="...", referencia pe título modal rehegua, .modal. Avei, ikatu eme’ẽ peteĩ ñemombe’u ne ñe’ẽñemi modal rehegua aria-describedbyon ndive .modal. Eñamindu’u natekotevẽiha remoĩve romoĩma role="dialog"guive JavaScript rupive.

Oñemoinge umi video YouTube-pegua

Oñemoinge hag̃ua YouTube videokuéra modal-pe oikotevẽ JavaScript adicional ndaha’éiva Bootstrap-pe ojejoko hag̃ua ijeheguiete ñembopu ha hetave mba’e. Ehecha ko kuatiañe’ẽ oipytyvõva Stack Overflow rehegua reikuaave hag̃ua.

Umi tamaño opcional rehegua

Umi modal oguereko mbohapy tuichakue opcional, ojeguerekóva clase modificador rupive oñemoĩ hag̃ua peteĩ .modal-dialog. Koꞌã tuichakue oike peteĩteĩva punto de ruptura-pe ani hag̃ua ojejapo barra de desplazamiento horizontal umi jehechaukaha ijyvykuꞌivévape.

Tuichakue	Mbo'ehakoty	Modal máx-ancho rehegua
Michĩ	`.modal-sm`	`300px`
Upevakuére	Avave	`500px`
Tuicha	`.modal-lg`	`800px`
Tuichaiterei mba’e	`.modal-xl`	`1140px`

Ñande modal por defecto clase modificador’ỹre omoheñói pe modal tamaño “medio”.

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

Ambue ñemboyke haꞌehína opción osẽ hag̃ua peteĩ modal ojahoꞌiva puruhára jehechaukaha, ojeguerekóva umi clase modificador rupive oñemoĩva peteĩ .modal-dialog.

Mbo'ehakoty	Disponibilidad rehegua
`.modal-fullscreen`	Akói
`.modal-fullscreen-sm-down`	`576px`
`.modal-fullscreen-md-down`	`768px`
`.modal-fullscreen-lg-down`	`992px`
`.modal-fullscreen-xl-down`	`1200px`
`.modal-fullscreen-xxl-down`	`1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

CSS rehegua

Variables rehegua

Oñemoĩve v5.2.0-pe

Pehẽngue ramo Bootstrap CSS mbaꞌekuaarã ñemboheko oñembohapévape, koꞌág̃a umi modal oipuru umi mbaꞌekuaarã CSS tetãygua rehegua .modalha .modal-backdropoñembotuichave hag̃ua ñembohekopyrã tiempo real-pe. Umi mbaꞌekuaarã CSS mbaꞌekuaarãme g̃uarã oñemohenda Sass rupive, upévare oipytyvõ gueteri Sass jeporupyre, avei.

  --#{$prefix}modal-zindex: #{$zindex-modal};
  --#{$prefix}modal-width: #{$modal-md};
  --#{$prefix}modal-padding: #{$modal-inner-padding};
  --#{$prefix}modal-margin: #{$modal-dialog-margin};
  --#{$prefix}modal-color: #{$modal-content-color};
  --#{$prefix}modal-bg: #{$modal-content-bg};
  --#{$prefix}modal-border-color: #{$modal-content-border-color};
  --#{$prefix}modal-border-width: #{$modal-content-border-width};
  --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
  --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
  --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
  --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
  --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
  --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
  --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
  --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
  --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
  --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
  --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};

  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

Sass mba’ekuaarã

$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:        var(--#{$prefix}border-color-translucent);
$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:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-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-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

$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);

Sã

Umi modal pantalla completa ombohováiva ojejapo $breakpointsmapa ha peteĩ bucle rupive 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,
      .modal-footer {
        @include border-radius(0);
      }

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

Jeporu rehegua

Pe plugin modal ombohasa ne mba’ekuaarã kañymby ojejeruréramo, umi atributo dato rehegua térã JavaScript rupive. Avei omboyke jepokuaa desplazamiento por defecto ha omoheñói peteĩ .modal-backdropomeꞌe hag̃ua peteĩ área clic rehegua oñemboyke hag̃ua umi modal ojehechaukáva ojepyso jave modal okaháre.

Umi atributo de datos rupive

Toggle rehegua

Emombaꞌapo peteĩ modal ehaiꞌeỹre JavaScript. Oñemohenda data-bs-toggle="modal"peteĩ elemento controlador rehe, peteĩ botón-icha, peteĩ data-bs-target="#foo"térã href="#foo"ndive ojepytaso hag̃ua peteĩ modal específico ojere hag̃ua.

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

Mboyke

Despido ikatu ojehupyty dataatributo reheve peteĩ botón modal ryepýpe ojehechaukaháicha ko’ápe:

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

térã peteĩ botón okápe modal-gui oipurúvo pe data-bs-targetojehechaukaháicha ko’ápe:

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

Oñepytyvõramo jepe mokõive tape oñemboyke hag̃ua peteĩ modal, eñongatu ne akãme oñemboyke hag̃ua peteĩ modal okáguio ndojoajúiha ARIA Ñe’ẽmondo Ñemboguatarã Ñe’ẽmondo (modal) jeporupyre ndive . Ejapo upéva nde riesgo reheve.

JavaScript rupive

Ejapo peteĩ modal peteĩ línea JavaScript reheve:

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

Opciones rehegua

Umi opción ikatuháicha oñembohasa atributo de datos térã JavaScript rupive, ikatu emoĩ peteĩ opción réra data-bs-, -peguáicha data-bs-animation="{value}". Ejesareko emoambue hag̃ua káso tipo opción réra “ camelCase ”-gui “ kebab-case ”-pe embohasávo umi opción atributo de datos rupive. Por ehémplo, eipuru data-bs-custom-class="beautifier"rangue data-bs-customClass="beautifier".

Bootstrap 5.2.0 guive, opaite componente oipytyvõ peteĩ atributo dato reservado experimentaldata-bs-config ikatúva oñemohenda componente configuración simple peteĩ cadena JSON ramo. Peteĩ elemento oguerekóramo data-bs-config='{"delay":0, "title":123}'ha data-bs-title="456"atributo, pe valor paha titlehaꞌeta 456ha umi atributo dato rehegua añónte omboykéta umi valor oñemeꞌevaꞌekue data-bs-config. Avei, umi atributo dato rehegua oĩmava ikatu oguereko JSON mbaꞌekuaarã data-bs-delay='{"show":0,"hide":150}'.

Téra	Hesegua	Upevakuére	Techaukaha
`backdrop`	booleano rehegua, .`'static'`	`true`	Oike peteĩ elemento modal-telón de fondo rehegua. Ikatu avei, emombeꞌu `static`peteĩ telón de fondo-pe g̃uarã nombotýiva modal ojepyso jave.
`focus`	booleano rehegua	`true`	Omoĩ enfoque modal rehe oñepyrũ jave.
`keyboard`	booleano rehegua	`true`	Omboty modal ojepysóramo tecla escape.

Método-kuéra rehegua

Método ha transición asíncrono rehegua

Opaite API rembiaporã haꞌehína asíncrono ha oñepyrũ peteĩ jehasapa . Ojevy hikuái ohenóivape oñepyrũvove pe transición ha katu opa mboyve . Avei, oñemboykéta peteĩ ñehenói método rehegua peteĩ componente oñembohasáva rehe .

Ehecha ore kuatiañe’ẽ JavaScript rehegua reikuaave hag̃ua .

Opciones de paso rehegua

Omomba’apo ne contenido modal ramo. Omoneĩ peteĩ opción opcional object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})

Tapereko	Techaukaha
`dispose`	Ombyai peteĩ elemento modal. (Oipeꞌa umi dato oñeñongatúva elemento DOM-pe)
`getInstance`	Método estático ohejáva ndéve rehupyty hag̃ua instancia modal ojoajúva peteĩ elemento DOM rehe.
`getOrCreateInstance`	Método estático ohejáva ndéve rehupyty instancia modal ojoajúva peteĩ elemento DOM ndive, térã emoheñói peteĩ pyahu en caso noñemoñepyrũi.
`handleUpdate`	Emohenda jey manualmente modal ñemohenda peteĩ modal yvatekuépe oñemoambuéramo ojepeꞌa aja (heꞌiséva ojehecharamo peteĩ barra de desplazamiento).
`hide`	Oñomi manualmente peteĩ modal. Ojevy ohenóivape oñeñomi mboyve añetehápe modal (heꞌiséva oiko mboyve pe `hidden.bs.modal`mbaꞌe ojehúva).
`show`	Oipe’a manualmente peteĩ modal. Ojevy ohenóivape ojehechauka mboyve añetehápe modal (heꞌiséva oiko mboyve pe `shown.bs.modal`mbaꞌe ojehúva). Avei, ikatu embohasa peteĩ elemento DOM argumento ramo ikatúva oñembohasa umi evento modal-pe ( `relatedTarget`propiedad ramo). (he’iséva `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`.
`toggle`	Ombohasa manualmente peteĩ modal. Ojevy ohenóivape ojehechauka térã oñeñomi mboyve añetehápe modal (heꞌiséva oiko mboyve `shown.bs.modal`térã `hidden.bs.modal`mbaꞌe ojehúva).

Umi mba’e oikóva

Bootstrap clase modal ohechauka mbovymi mbaꞌe ojehúva oñembojoaju hag̃ua funcionalidad modal-pe. Opaite mbaꞌe ojehúva modal ojedispara pe modal rehe voi (heꞌiséva pe <div class="modal">).

Jeguerohyha	Techaukaha
`hide.bs.modal`	Ko mbaꞌe ojehúva oñembogue pyaꞌe oñehenói rire pe `hide`método instancia rehegua.
`hidden.bs.modal`	Ko mbaꞌe ojehúva oñembogue modal oñemokañypa rire puruháragui (ohaꞌarõta CSS jehaipyre oñembotývo).
`hidePrevented.bs.modal`	Ko mbaꞌe ojehúva ojedispara ojehechauka jave modal, itelón de fondo haꞌe `static`ha ojejapo peteĩ clic modal okaháre. Avei oñembopu pe mbaꞌe ojehúva ojepysóramo tecla escape ha oñemboguapy `keyboard`opción `false`.
`show.bs.modal`	Ko mbaꞌe ojehúva oñembopu pyaꞌe oñehenói jave `show`método instancia rehegua. Ojejapóramo peteĩ jekutu rupive, pe elemento ojepysóva ojeguereko `relatedTarget`pe mbaꞌe ojehúva mbaꞌeichaitépa.
`shown.bs.modal`	Ko mbaꞌe ojehúva oñembogue ojejapo rire modal ojehecha hag̃ua puruhárape (ohaꞌarõta oñembotývo umi CSS jehasaha). Ojejapóramo peteĩ jekutu rupive, pe elemento ojepysóva ojeguereko `relatedTarget`pe mbaꞌe ojehúva mbaꞌeichaitépa.

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