Módúil

Bain úsáid as breiseán módúil JavaScript Bootstrap chun dialóga a chur le do shuíomh le haghaidh boscaí solais, fógraí úsáideora, nó ábhar go hiomlán saincheaptha.

Ar an leathanach seo

Conas a oibríonn sé

Sula dtosaíonn tú le comhpháirt mhódúil Bootstrap, bí cinnte an méid seo a leanas a léamh mar go bhfuil ár roghanna roghchláir athraithe le déanaí.

Tógtar modhanna le HTML, CSS, agus JavaScript. Tá siad suite thar gach rud eile sa doiciméad agus bain an scrolla as an <body>ionas go scrollaíonn ábhar modha ina ionad.
Má chliceálann tú ar an “cúlra” módúil, dúnfar an modúl go huathoibríoch.
Ní thacaíonn Bootstrap ach fuinneog mhódúil amháin ag an am. Ní thacaítear le módúil neadaithe mar creidimid gur droch-eispéiris úsáideoirí iad.
Úsáideann modhanna position: fixed, a d'fhéadfadh a bheith beagán faoi leith uaireanta faoina rindreáil. Nuair is féidir, cuir do HTML módúil i suíomh barrleibhéil chun cur isteach féideartha ó eilimintí eile a sheachaint. Is dócha go mbeidh fadhbanna agat agus tú ag neadú .modallaistigh d’eilimint sheasta eile.
Arís eile, mar gheall ar position: fixed, tá roinnt caveats ann maidir le modúil a úsáid ar ghléasanna soghluaiste. Féach ar ár ndoiciméid tacaíochta brabhsálaí le haghaidh sonraí.
Mar gheall ar an gcaoi a sainmhíníonn HTML5 a shéimeantaic, níl aon éifeacht ag an autofocustréith HTML i módúil Bootstrap. Chun an éifeacht chéanna a bhaint amach, bain úsáid as roinnt JavaScript saincheaptha:

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

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

Tá éifeacht beochana an chomhpháirt seo ag brath ar prefers-reduced-motioncheist na meán. Féach an rannán tairiscint laghdaithe dár gcáipéisíocht inrochtaineachta .

Lean ort ag léamh le haghaidh taispeána agus treoirlínte úsáide.

Samplaí

Anseo thíos tá sampla módúil statachposition (a chiallaíonn go bhfuil sé agus displaygur sáraíodh é). San áireamh tá an ceanntásc módúil, an corp módúil (riachtanach le haghaidh padding), agus buntásc módúil (roghnach). Iarraimid ort ceanntásca módúla a chur san áireamh le gníomhartha dífhostaithe nuair is féidir, nó gníomh dífhostú sainráite eile a sholáthar.

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

Taispeántas beo

Scoránaigh taispeána modha oibre trí chliceáil ar an gcnaipe thíos. Sleamhnóidh sé síos agus céimnithe isteach ó bharr an leathanaigh.

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

Cúlra statach

Nuair a bheidh an cúlra socraithe go statach, ní dhúnfaidh an modúl nuair a chliceáiltear taobh amuigh de. Cliceáil ar an gcnaipe thíos chun triail a bhaint as.

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

Scrollaigh ábhar fada

Nuair a éiríonn módúil rófhada le haghaidh radharc nó gléas an úsáideora, scrollaíonn siad neamhspleách ar an leathanach féin. Bain triail as an taispeántas thíos a fheiceáil cad atá i gceist againn.

Is féidir leat modha inscrollaithe a chruthú freisin a cheadaíonn an corp módúil a scrollú ach cur .modal-dialog-scrollablele .modal-dialog.

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

Ingearach lárnach

Cuir .modal-dialog-centeredle .modal-dialoglár an mhódúil go hingearach.

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

Leideanna uirlisí agus popovers

Is féidir leideanna uirlisí agus popovers a chur laistigh de mhódúil mar is gá. Nuair a dhúntar módúil, déantar aon leideanna uirlisí agus popovers laistigh díobh a dhíbhe go huathoibríoch freisin.

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

Ag baint úsáide as an eangach

Bain úsáid as córas eangaí Bootstrap laistigh de mhódúil trí neadú .container-fluidlaistigh den .modal-body. Ansin, bain úsáid as na gnáthranganna córais eangaí mar a dhéanfá áit ar bith eile.

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

An bhfuil sraith cnaipí agat a spreagann an modh céanna agus a bhfuil ábhair beagán difriúil acu? Úsáid event.relatedTargetagus tréithe HTMLdata-bs-* chun inneachar an mhódúil a athrú ag brath ar an gcnaipe ar a ndearnadh cliceáil.

Anseo thíos tá taispeántas beo agus HTML agus JavaScript mar shampla. Le haghaidh tuilleadh faisnéise, léigh na doiciméid um imeachtaí módúla le haghaidh sonraí ar relatedTarget.

html

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

Scoránaigh idir módúil

Scoránaigh idir módúil iolracha le roinnt socrúcháin cliste de na data-bs-targetagus na data-bs-toggletréithe. Mar shampla, d'fhéadfá modhnú athshocraithe pasfhocail a scoránaigh laistigh de chomhartha modúl atá oscailte cheana féin. Tabhair faoi deara le do thoil nach féidir modhanna iolracha a oscailt ag an am céanna — ní dhéanann an modh seo ach scoránú idir dhá mhódúil ar leith.

Oscail an chéad mhodh

html

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

Athraigh beochan

Cinneann an t- $modal-fade-transformathróg an staid claochlaithe .modal-dialogroimh an beochan céimnithe módúil, $modal-show-transformsocraíonn an athróg an claochlú .modal-dialogag deireadh na beochana modha céimnithe-i.

Más mian leat mar shampla beochan súmáil isteach, is féidir leat $modal-fade-transform: scale(.8).

Bain beochan

Le haghaidh módúil atá le feiceáil go simplí seachas céimnithe isteach sa radharc, bain an .faderang de do mharcáil módúil.

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

Airde dinimiciúil

Má athraíonn airde módúil agus é oscailte, ba cheart duit glaoch myModal.handleUpdate()chun suíomh an mhódúil a athcheartú ar eagla go bhfeicfear scrollbharra.

Inrochtaineacht

Bí cinnte aria-labelledby="...", ag tagairt don teideal módúil, a chur le .modal. Ina theannta sin, is féidir leat cur síos a dhéanamh ar do dialóg mhodhúil agus aria-describedbyar .modal. Tabhair faoi deara nach gá duit é a chur leis role="dialog"toisc go gcuirimid leis é trí JavaScript cheana féin.

Físeáin YouTube a neadú

Chun físeáin YouTube a leabú i módúil tá gá le JavaScript breise nach bhfuil i Bootstrap chun athsheinm agus níos mó a stopadh go huathoibríoch. Féach ar an bpostáil cabhrach Stack Overflow seo le haghaidh tuilleadh eolais.

Méideanna roghnacha

Tá trí mhéid roghnacha ag na modúil, ar fáil trí ranganna mionathraithe le cur ar .modal-dialog. Tosaíonn na méideanna seo ag brisphointí áirithe chun barraí scrollbharra cothrománacha ar phoirt amhairc níos cúinge a sheachaint.

Méid	Aicme	Leithead uasta módúil
Beaga	`.modal-sm`	`300px`
Réamhshocrú	Dada	`500px`
Mór	`.modal-lg`	`800px`
Breise mór	`.modal-xl`	`1140px`

Is é ár modúl réamhshocraithe gan modhnóirí an modúl “meánmhéide”.

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

Sárú eile is ea an rogha módúil a dhéanamh a chlúdaíonn radharc an úsáideora, atá ar fáil trí ranganna mionathraithe a chuirtear ar .modal-dialog.

Aicme	Infhaighteacht
`.modal-fullscreen`	I gcónaí
`.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

Athróga

Curtha leis in v5.2.0

Mar chuid de chur chuige athróg CSS Bootstrap atá ag teacht chun cinn, úsáideann módúil anois athróga áitiúla CSS ar .modalagus .modal-backdrople haghaidh saincheaptha feabhsaithe fíor-ama. Socraítear luachanna na n-athróg CSS trí Sass, mar sin tacaítear le saincheaptha Sass fós freisin.

  --#{$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};

Athróga Sass

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

Lúb

Gintear módúil lánscáileáin sofhreagracha tríd an $breakpointsléarscáil agus lúb i 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;
      }
    }
  }
}

Úsáid

Scoránaigh an breiseán modha d’inneachar folaithe ar éileamh, trí tréithe sonraí nó JavaScript. Sáraíonn sé freisin iompar scrollaithe réamhshocraithe agus gineann sé .modal-backdropa chun limistéar cliceáil a sholáthar chun módúil a thaispeántar a dhíbhe nuair a chliceáiltear lasmuigh den mhódúil.

Trí tréithe sonraí

Scoránaigh

Modúl a ghníomhachtú gan JavaScript a scríobh. Socraigh data-bs-toggle="modal"ar eilimint rialtóra, cosúil le cnaipe, mar aon le data-bs-target="#foo"nó href="#foo"chun modh sonrach a dhíriú chun scoránaigh.

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

Díbhe

Is féidir dífhostú a bhaint amach leis an datatréith ar chnaipe laistigh den mhódúil mar a léirítear thíos:

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

nó ar chnaipe lasmuigh den mhódúil ag baint úsáide as an data-bs-targetméid a léirítear thíos:

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

Cé go dtacaítear leis an dá bhealach chun modúl a dhífhostú, coinnigh i gcuimhne nach ionann dífhostú ón taobh amuigh de mhodhanna agus patrún dialóg (módúil) Treoir Chleachtais Údaraithe ARIA . Déan é seo ar do phriacal féin.

Trí JavaScript

Cruthaigh modúl le líne amháin de JavaScript:

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

Roghanna

Toisc gur féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript, is féidir leat ainm rogha a chur i gceangal le data-bs-, mar atá i data-bs-animation="{value}". Bí cinnte cineál an cháis d’ainm na rogha a athrú ó “ camelCase ” go “ kebab-case ” agus tú ag dul thar na roghanna trí tréithe sonraí. Mar shampla, úsáid data-bs-custom-class="beautifier"in ionad data-bs-customClass="beautifier".

Amhail Bootstrap 5.2.0, tacaíonn na comhpháirteanna go léir le tréith sonraí forchoimeádta turgnamhachadata-bs-config ar féidir cumraíocht chomhpháirt shimplí a áireamh mar theaghrán JSON. data-bs-config='{"delay":0, "title":123}'Nuair a bhíonn agus tréithe ag eilimint , is é an luach data-bs-title="456"deiridh a bheidh ann agus sáróidh na tréithe sonraí ar leith na luachanna a thugtar ar . Ina theannta sin, tá tréithe sonraí atá ann cheana in ann luachanna JSON cosúil le .title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Ainm	Cineál	Réamhshocrú	Cur síos
`backdrop`	Boole,`'static'`	`true`	Áirítear eilimint mhodúil chúlra. Nó, sonraigh `static`le haghaidh cúlra nach ndúnann an modha nuair a chliceáiltear air.
`focus`	Boole	`true`	Cuireann sé an fócas ar an modha nuair a thosaigh sé.
`keyboard`	Boole	`true`	Dúnann sé an modúl nuair a bhrúitear eochair éalaithe.

Modhanna

Modhanna agus aistrithe asincrónacha

Tá gach modh API asincrónach agus cuireann siad tús le haistriú . Filleann siad ar an nglaoiteoir a luaithe a chuirtear tús leis an aistriú ach sula gcríochnaíonn sé . Ina theannta sin, ní thabharfar aird ar ghlao modha ar chomhpháirt trasdula .

Féach ar ár gcáipéisíocht JavaScript le haghaidh tuilleadh eolais .

Roghanna pasála

Gníomhachtaíonn d'ábhar mar mhodh modúl. Glacann rogha roghnach object.

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

Modh	Cur síos
`dispose`	Scriosann modhúil eilimint. (Baintear sonraí stóráilte ar an eilimint DOM)
`getInstance`	Modh statach a ligeann duit an t-ásc módúil a bhaineann le heilimint DOM a fháil.
`getOrCreateInstance`	Modh statach a cheadaíonn duit an t-ásc módúil a bhaineann le heilimint DOM a fháil, nó ceann nua a chruthú ar eagla nár cuireadh tús leis.
`handleUpdate`	Déan suíomh an mhódúil a athcheartú de láimh má athraíonn airde an mhódúil agus é oscailte (ie ar eagla go bhfeictear scrollbharra).
`hide`	Folaigh modúl de láimh. Filleann sé ar an nglaoiteoir sula gcuirtear an modh i bhfolach (ie sula `hidden.bs.modal`dtarlaíonn an teagmhas).
`show`	Osclaíonn modúl de láimh. Filleann sé ar an nglaoiteoir sula dtaispeántar an modúl iarbhír (.i. sula `shown.bs.modal`dtarlaíonn an teagmhas). Chomh maith leis sin, is féidir leat pas a fháil ar eilimint DOM mar argóint is féidir a fháil sna himeachtaí modha (mar an `relatedTarget`maoin). (.i `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`.
`toggle`	Scoránaigh modúl de láimh. Filleann sé ar an nglaoiteoir sula dtaispeántar nó sula gcuirtear i bhfolach an modúl (.i. sula dtarlaíonn an `shown.bs.modal`nó an teagmhas).`hidden.bs.modal`

Imeachtaí

Nochtann rang modha Bootstrap roinnt imeachtaí chun dul i ngleic le feidhmiúlacht mhódúil. Cuirtear na teagmhais mhódúla go léir chun cinn ag an modúl féin (.i. ag an <div class="modal">).

Imeacht	Cur síos
`hide.bs.modal`	Cuirtear an teagmhas seo ar ceal láithreach nuair `hide`a ghlaoitear an modh ásc.
`hidden.bs.modal`	Tá an teagmhas seo bréan nuair a bhíonn an módúil curtha i bhfolach ón úsáideoir (fanfaidh sé go mbeidh aistrithe CSS le cur i gcrích).
`hidePrevented.bs.modal`	Cealaítear an teagmhas seo nuair a thaispeánfar an modúl, déantar a chúlra `static`agus déantar cliceáil taobh amuigh den mhódúil. Cuirtear an teagmhas as feidhm freisin nuair a bhrúitear an eochair éalaithe agus nuair a bhíonn an `keyboard`rogha socraithe go `false`.
`show.bs.modal`	Téann an teagmhas seo chun solais láithreach nuair `show`a ghlaoitear an modh ásc. Más cliceáil is cúis leis, tá an eilimint chliceáilte ar fáil mar `relatedTarget`airí an imeachta.
`shown.bs.modal`	Cuirtear an teagmhas seo ar ceal nuair a bheidh an modúl infheicthe don úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích). Más cliceáil is cúis leis, tá an eilimint chliceáilte ar fáil mar `relatedTarget`airí an imeachta.

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