Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
Check
in English

Awoṣe

Lo ohun itanna modal JavaScript Bootstrap lati ṣafikun awọn ibaraẹnisọrọ si aaye rẹ fun awọn apoti ina, awọn iwifunni olumulo, tabi akoonu aṣa patapata.

Lori iwe yi

Bawo ni o ṣe n ṣiṣẹ

Ṣaaju ki o to bẹrẹ pẹlu paati modal Bootstrap, rii daju lati ka atẹle bi awọn aṣayan akojọ aṣayan wa ti yipada laipẹ.

  • Awọn awoṣe jẹ itumọ pẹlu HTML, CSS, ati JavaScript. Wọn wa ni ipo lori ohun gbogbo miiran ninu iwe naa ki o yọ yi lọ kuro ni <body>ki akoonu modal yi lọ dipo.
  • Tite lori modal “backdrop” yoo pa modal naa laifọwọyi.
  • Bootstrap nikan ṣe atilẹyin window modal kan ni akoko kan. Awọn awoṣe itẹle ko ni atilẹyin bi a ṣe gbagbọ pe wọn jẹ awọn iriri olumulo ti ko dara.
  • Modals lilo position: fixed, eyi ti o le ma jẹ kan bit pato nipa awọn oniwe- Rendering. Nigbakugba ti o ṣee ṣe, gbe HTML modal rẹ si ipo ipele oke lati yago fun kikọlu agbara lati awọn eroja miiran. O ṣee ṣe ki o lọ sinu awọn ọran nigbati o ba n gbe ile kan .modallaarin eroja ti o wa titi miiran.
  • Lekan si, nitori position: fixed, nibẹ ni o wa diẹ ninu awọn caveats pẹlu lilo modals lori awọn ẹrọ alagbeka. Wo awọn iwe atilẹyin ẹrọ aṣawakiri wa fun awọn alaye.
  • Nitori bi HTML5 ṣe n ṣalaye awọn itumọ-ọrọ rẹ, ẹda autofocusHTML ko ni ipa ni awọn awoṣe Bootstrap. Lati ṣaṣeyọri ipa kanna, lo diẹ ninu JavaScript aṣa:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
Ipa iwara ti paati yii dale lori prefers-reduced-motionibeere media. Wo apakan išipopada ti o dinku ti iwe iraye si wa .

Jeki kika fun demos ati awọn ilana lilo.

Awọn apẹẹrẹ

Ni isalẹ jẹ apẹẹrẹ modal aimi (itumọ rẹ positionati displaype o ti bori). To wa pẹlu akọsori modal, ara modal (ti a beere fun padding), ati ẹlẹsẹ modal (aṣayan). A beere pe ki o pẹlu awọn akọle modal pẹlu awọn iṣe yiyọ kuro nigbakugba ti o ṣee ṣe, tabi pese igbese ifasilẹ gbangba miiran.

Modal akọle

Modal body ọrọ lọ nibi.

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

Live demo

Yi demo modal ṣiṣẹ nipa tite bọtini ni isalẹ. Yoo rọra si isalẹ ati ipare ni lati oke ti oju-iwe naa.

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

Aimi backdrop

Nigbati a ba ṣeto backdrop si aimi, modal naa kii yoo sunmọ nigbati o ba tẹ si ita rẹ. Tẹ awọn bọtini ni isalẹ lati gbiyanju o.

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

Yi lọ akoonu gun

Nigbati awọn awoṣe ba gun ju fun wiwo olumulo tabi ẹrọ, wọn yi lọ ni ominira ti oju-iwe naa funrararẹ. Gbiyanju demo ni isalẹ lati wo kini a tumọ si.

O tun le ṣẹda modal yiyi ti o fun laaye yi lọ ara modal nipa fifi kun .modal-dialog-scrollablesi .modal-dialog.

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

Ni inaro aarin

Fi .modal-dialog-centeredsi .modal-dialoginaro aarin 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>

Tooltips ati popovers

Awọn imọran irinṣẹ ati awọn agbejade le wa ni gbe laarin awọn modal bi o ṣe nilo. Nigbati modals ti wa ni pipade, eyikeyi awọn imọran irinṣẹ ati awọn agbejade laarin tun jẹ yọkuro laifọwọyi.

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

Lilo awọn akoj

Lo eto akoj Bootstrap laarin modal nipasẹ itẹ-ẹiyẹ .container-fluidlaarin .modal-body. Lẹhinna, lo awọn kilasi eto akoj deede bi o ṣe le nibikibi miiran.

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

Akoonu modal ti o yatọ

Ni opo ti awọn bọtini ti gbogbo awọn okunfa kanna modal pẹlu die-die o yatọ si awọn akoonu? Lo event.relatedTargetati awọn abuda HTMLdata-bs-* lati yatọ si awọn akoonu ti modal da lori iru bọtini ti o tẹ.

Ni isalẹ ni demo ifiwe kan atẹle nipa apẹẹrẹ HTML ati JavaScript. Fun alaye diẹ sii, ka awọn docs awọn iṣẹlẹ modal fun awọn alaye lori 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
})

Yipada laarin awọn modals

Yipada laarin ọpọlọpọ awọn modals pẹlu diẹ ninu awọn aye onilàkaye ti awọn data-bs-targetati awọn data-bs-toggleeroja. Fun apẹẹrẹ, o le yi modal atunto ọrọ igbaniwọle kan lati inu modal ami ti o ṣii tẹlẹ. Jọwọ ṣe akiyesi ọpọlọpọ awọn adaṣe ko le wa ni sisi ni akoko kanna - ọna yii nirọrun yipada laarin awọn awoṣe lọtọ meji.

Ṣii modal akọkọ
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>

Yi iwara

Oniyipada $modal-fade-transformṣe ipinnu ipo iyipada ti .modal-dialogṣaaju ki modal fade-in animation, $modal-show-transformoniyipada ṣe ipinnu iyipada ti .modal-dialogni opin ti modal fade-in animation.

Ti o ba fẹ fun apẹẹrẹ ere idaraya sun-un, o le ṣeto $modal-fade-transform: scale(.8).

Yọ iwara kuro

Fun awọn awoṣe ti o han nirọrun kuku ju ipare sinu lati wo, yọ .fadekilasi kuro lati isamisi modal rẹ.

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

Awọn giga ti o ni agbara

Ti giga modal ba yipada lakoko ti o wa ni sisi, o yẹ ki o pe myModal.handleUpdate()lati tun ipo ipo modal ṣe ni ọran ti lilọ kiri ba han.

Wiwọle

Rii daju lati ṣafikun aria-labelledby="...", tọka akọle modal, si .modal. Ni afikun, o le fun ni apejuwe ti ibaraẹnisọrọ modal rẹ pẹlu aria-describedbylori .modal. Ṣe akiyesi pe o ko nilo lati ṣafikun role="dialog"nitori a ti ṣafikun tẹlẹ nipasẹ JavaScript.

Ifisinu YouTube awọn fidio

Ifisinu awọn fidio YouTube ni awọn awoṣe nilo afikun JavaScript kii ṣe ni Bootstrap lati da ṣiṣiṣẹsẹhin duro laifọwọyi ati diẹ sii. Wo ifiweranṣẹ Stack Overflow ti o ṣe iranlọwọ fun alaye diẹ sii.

Awọn iwọn iyan

Awọn awoṣe ni awọn iwọn iyan mẹta, wa nipasẹ awọn kilasi modifier lati gbe sori faili .modal-dialog. Awọn iwọn wọnyi tapa ni awọn aaye isinmi kan lati yago fun awọn yiyi ti petele lori awọn iwoye ti o dín.

Iwọn Kilasi Modal max-iwọn
Kekere .modal-sm 300px
Aiyipada Ko si 500px
Tobi .modal-lg 800px
Afikun nla .modal-xl 1140px

Modal aiyipada wa laisi kilasi modifier jẹ iwọn “alabọde” iwọn modal.

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

Awoṣe iboju ni kikun

Ifiweranṣẹ miiran ni aṣayan lati gbejade modal kan ti o bo oju wiwo olumulo, ti o wa nipasẹ awọn kilasi modifier ti o gbe sori faili .modal-dialog.

Kilasi Wiwa
.modal-fullscreen Nigbagbogbo
.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

Awọn oniyipada

Fi kun v5.2.0

Gẹ́gẹ́ bí ara Bootstrap’s títúnṣe àwọn oníyípadà CSS, àwọn modals ń lo àwọn oniyipada CSS ti agbegbe lori .modalati .modal-backdropfun imudara isọdi-akoko gidi. Awọn iye fun awọn oniyipada CSS ti ṣeto nipasẹ Sass, nitorinaa isọdi Sass tun ni atilẹyin, paapaa.

  --#{$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 oniyipada

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

Loop

Awọn awoṣe iboju kikun idahun jẹ ipilẹṣẹ nipasẹ $breakpointsmaapu ati lupu kan ninu 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;
      }
    }
  }
}

Lilo

Ohun itanna modal yi akoonu ti o farapamọ pada lori ibeere, nipasẹ awọn abuda data tabi JavaScript. O tun dojukọ ihuwasi yiyi lọ aiyipada ati ṣe ipilẹṣẹ kan .modal-backdroplati pese agbegbe tẹ kan fun yiyọ awọn awoṣe ti o han nigbati titẹ si ita modal.

Nipasẹ awọn abuda data

Yipada

Mu modal ṣiṣẹ laisi kikọ JavaScript. Ṣeto data-bs-toggle="modal"lori eroja oludari, bii bọtini kan, pẹlu kan data-bs-target="#foo"tabi href="#foo"lati fojusi modal kan pato lati yi.

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

Yọọ kuro

Iyọkuro le ṣee ṣe pẹlu dataabuda lori bọtini kan laarin modal bi a ti ṣe afihan ni isalẹ:

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

tabi lori bọtini kan ni ita modal nipa lilo eyi ti data-bs-targeta ṣe afihan ni isalẹ:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Lakoko ti awọn ọna mejeeji lati yọ modal kuro ni atilẹyin, ni lokan pe yiyọ kuro lati ita modal kan ko baramu pẹlu ilana Itọnisọna Awọn adaṣe Akọwe ARIA (modal) . Ṣe eyi ni ewu ti ara rẹ.

Nipasẹ JavaScript

Ṣẹda modal pẹlu ila kan ti JavaScript:

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

Awọn aṣayan

Bi awọn aṣayan ṣe le kọja nipasẹ awọn abuda data tabi JavaScript, o le fi orukọ aṣayan si data-bs-, bi ninu data-bs-animation="{value}". Rii daju lati yi iru ọran ti orukọ aṣayan pada lati “ CamelCase ” si “ kebab-case ” nigba gbigbe awọn aṣayan nipasẹ awọn abuda data. Fun apẹẹrẹ, lo data-bs-custom-class="beautifier"dipo data-bs-customClass="beautifier".

Bi ti Bootstrap 5.2.0, gbogbo awọn paati ṣe atilẹyin abuda data ipamọ idanwodata-bs-config ti o le ṣe atunto paati ti o rọrun bi okun JSON kan. Nigbati ohun kan ba ni data-bs-config='{"delay":0, "title":123}'ati data-bs-title="456"awọn abuda, iye ikẹhin titleyoo jẹ 456ati awọn abuda data lọtọ yoo dojuti awọn iye ti a fun lori data-bs-config. Ni afikun, awọn abuda data ti o wa ni anfani lati gbe awọn iye JSON bii data-bs-delay='{"show":0,"hide":150}'.

Oruko Iru Aiyipada Apejuwe
backdrop boolian,'static' true Pẹlu a modal-backdrop ano. Ni omiiran, pato staticfun ẹhin ẹhin eyiti ko pa modal naa nigbati o tẹ.
focus boolian true Fi idojukọ lori modal nigba ti ipilẹṣẹ.
keyboard boolian true Tilekun modal nigbati o ba tẹ bọtini ona abayo.

Awọn ọna

Awọn ọna Asynchronous ati awọn iyipada

Gbogbo awọn ọna API jẹ asynchronous ati bẹrẹ iyipada kan . Wọn pada si ọdọ olupe ni kete ti iyipada ti bẹrẹ ṣugbọn ṣaaju ki o to pari . Ni afikun, ipe ọna kan lori paati iyipada yoo jẹ kọbikita .

Wo iwe JavaScript wa fun alaye diẹ sii .

Awọn aṣayan gbigbe

Mu akoonu rẹ ṣiṣẹ bi modal. Gba awọn aṣayan iyan object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Ọna Apejuwe
dispose Pa ohun ano ká modal. (Yọ data ti o fipamọ sori nkan DOM kuro)
getInstance Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ modal ti o ni nkan ṣe pẹlu nkan DOM kan.
getOrCreateInstance Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ modal ti o ni nkan ṣe pẹlu nkan DOM kan, tabi ṣẹda ọkan tuntun ni ọran ti ko ṣe ipilẹṣẹ.
handleUpdate Ṣe atunṣe ipo modal pẹlu ọwọ ti giga modal ba yipada lakoko ti o wa ni sisi (ie ti o ba jẹ pe yiyi yoo han).
hide Pẹlu ọwọ hides a modal. Pada si olupe ṣaaju ki modal naa ti farapamọ gangan (ie ṣaaju ki hidden.bs.modaliṣẹlẹ naa to waye).
show Pẹlu ọwọ ṣii modal kan. Pada si olupe ṣaaju ki modal ti han gangan (ie ṣaaju ki shown.bs.modaliṣẹlẹ naa to waye). Pẹlupẹlu, o le kọja nkan DOM kan bi ariyanjiyan ti o le gba ni awọn iṣẹlẹ modal (gẹgẹbi ohun- relatedTargetini). (ie const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Pẹlu ọwọ yipada modal kan. Pada si olupe ṣaaju ki modal ti han gangan tabi farapamọ (ie ṣaaju ki iṣẹlẹ shown.bs.modaltabi hidden.bs.modaliṣẹlẹ waye).

Awọn iṣẹlẹ

Kilasi modal Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe modal. Gbogbo awọn iṣẹlẹ modal jẹ ina ni modal funrararẹ (ie ni <div class="modal">).

Iṣẹlẹ Apejuwe
hide.bs.modal Iṣẹlẹ yii jẹ ina lẹsẹkẹsẹ nigbati ọna hideapẹẹrẹ ti pe.
hidden.bs.modal Iṣẹlẹ yii jẹ ina nigbati modal naa ba ti pari fifipamọ lati ọdọ olumulo (yoo duro fun awọn iyipada CSS lati pari).
hidePrevented.bs.modal Yi iṣẹlẹ ti wa ni kuro lenu ise nigbati awọn modal ti han, awọn oniwe-backdrop jẹ staticati ki o kan tẹ ita ti awọn modal ti wa ni ṣe. Iṣẹlẹ naa tun jẹ ina nigbati o ba tẹ bọtini ona abayo ati keyboardaṣayan ti ṣeto si false.
show.bs.modal Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn showapẹẹrẹ ọna ti a npe ni. Ti o ba ṣẹlẹ nipasẹ titẹ kan, eroja ti o tẹ wa bi relatedTargetohun-ini ti iṣẹlẹ naa.
shown.bs.modal Iṣẹlẹ yii jẹ ina nigbati modal ti jẹ ki o han si olumulo (yoo duro fun awọn iyipada CSS lati pari). Ti o ba ṣẹlẹ nipasẹ titẹ kan, eroja ti o tẹ wa bi relatedTargetohun-ini ti iṣẹlẹ naa. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})