Modal

Koresha Bootstrap ya JavaScript modal plugin kugirango wongere ibiganiro kurubuga rwawe kumasanduku yumucyo, imenyesha ryabakoresha, cyangwa ibikubiyemo rwose.

Kuriyi page

Uburyo ikora

Mbere yo gutangira hamwe na moderi ya Bootstrap, menya neza gusoma ibikurikira nkuko amahitamo yacu aherutse guhinduka.

Moderi yubatswe hamwe na HTML, CSS, na JavaScript. Bashyizwe hejuru y'ibindi byose biri mu nyandiko hanyuma bakureho umuzingo <body>kugirango ibintu bya modal bizunguruka aho.
Kanda kuri modal "backdrop" izahita ifunga modal.
Bootstrap ishyigikira idirishya rimwe gusa icyarimwe. Moderi yatoranijwe ntabwo ishyigikiwe nkuko twemera ko ari uburambe bwabakoresha.
Uburyo bukoreshwa position: fixed, bushobora rimwe na rimwe kuba bwihariye kubijyanye no gutanga. Igihe cyose bishoboka, shyira HTML modal yawe murwego rwo hejuru kugirango wirinde kwivanga mubindi bintu. Birashoboka ko uzahura nibibazo mugihe utera .modalikindi kintu gihamye.
Ubundi na none, kubera position: fixed, hari caveats hamwe no gukoresha modal kubikoresho bigendanwa. Reba amashakiro yacu ashyigikira doc kubisobanuro birambuye.
Bitewe nuburyo HTML5 isobanura ibisobanuro byayo, ikiranga autofocusHTML nta ngaruka igira muburyo bwa Bootstrap. Kugirango ugere ku ngaruka zimwe, koresha JavaScript imwe yihariye:

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

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

Ingaruka ya animasiyo yibi bice biterwa prefers-reduced-motionnibibazo byitangazamakuru. Reba igice cyagabanijwe cyicyiciro cyibisobanuro byacu .

Komeza usome kuri demo nubuyobozi bukoreshwa.

Ingero

Hasi nurugero ruhagazeposition neza (bisobanura ibyarwo kandi displaybyararenze). Harimo imitwe yumutwe, modal umubiri (bisabwa kuri padding), hamwe na moderi yumutwe (bidashoboka). Turasaba ko ushiramo imitwe yuburyo hamwe nibikorwa byo kwirukana igihe cyose bishoboka, cyangwa ugatanga ikindi gikorwa cyo kwirukana.

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

Kubaho

Kanda kuri moderi ikora yerekana kanda buto hepfo. Bizanyerera kandi bishire hejuru yurupapuro.

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

Imiterere yinyuma

Iyo backdrop yashizwe kuri static, modal ntizifunga mugihe ukanze hanze yacyo. Kanda buto hepfo kugirango ugerageze.

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

Kuzenguruka ibintu birebire

Iyo moderi iba ndende cyane kubakoresha kureba cyangwa igikoresho, bazunguruka batisunze page ubwayo. Gerageza demo hepfo kugirango urebe icyo dushaka kuvuga.

Urashobora kandi gukora modal izenguruka yemerera kuzenguruka umubiri muburyo .modal-dialog-scrollablewongeyeho .modal-dialog.

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

Hagati

Ongeraho .modal-dialog-centeredkugirango .modal-dialoguhagarike hagati ya 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>

Ibikoresho na popovers

Ibikoresho na popovers birashobora gushirwa muburyo bukenewe. Iyo moderi zifunze, ibikoresho byose hamwe na popovers imbere nabyo birahita birukanwa.

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

Gukoresha gride

Koresha Bootstrap grid sisitemu muburyo bwo guteramo .container-fluidimbere muri .modal-body. Noneho, koresha urwego rusanzwe rwa grid sisitemu nkuko wabishaka ahandi.

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

Ufite buto ya buto yose itera modal imwe hamwe nibintu bitandukanye? Koresha event.relatedTargetna HTML data-bs-*ibiranga kugirango uhindure ibiri muri modal ukurikije buto yakanze.

Hasi ni demo nzima ikurikirwa nurugero HTML na JavaScript. Kubindi bisobanuro, soma ibyabaye modal docs kugirango ubone ibisobanuro birambuye 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
})

Hindura hagati yuburyo

Hinduranya hagati yuburyo bwinshi hamwe nubushishozi bushyize data-bs-targethamwe data-bs-togglenibiranga. Kurugero, urashobora guhinduranya ijambo ryibanga gusubiramo modal uhereye mubimenyetso bimaze gufungura muburyo. Nyamuneka menya uburyo bwinshi budashobora gufungura icyarimwe - ubu buryo burahinduka hagati yuburyo bubiri butandukanye.

Fungura uburyo bwa mbere

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

Hindura animasiyo

Impinduka $modal-fade-transformigena ihinduka ryimiterere ya .modal-dialogmbere yuburyo bwa fade-in animasiyo, $modal-show-transformimpinduka igena impinduka .modal-dialogkumpera ya modal fade-in animasiyo.

Niba ushaka urugero rwa zoom-in animasiyo, urashobora gushiraho $modal-fade-transform: scale(.8).

Kuraho animasiyo

Kuburyo bugaragara gusa aho gushira kugirango turebe, kura urwego muburyo .fadebwawe.

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

Uburebure butangaje

Niba uburebure bwa modal ihinduka mugihe ifunguye, ugomba guhamagara myModal.handleUpdate()kugirango uhindure imyanya yuburyo mugihe umuzingo ugaragara.

Kuboneka

Wemeze kongeraho aria-labelledby="...", werekana umutwe wuburyo, kuri .modal. Byongeye kandi, urashobora gutanga ibisobanuro byuburyo bwikiganiro hamwe aria-describedbyna .modal. Menya ko udakeneye kongeramo role="dialog"kuva tumaze kongeramo binyuze kuri JavaScript.

Gushyira amashusho ya YouTube

Gushyira amashusho ya YouTube muburyo busaba JavaScript yinyongera itari muri Bootstrap kugirango ihite ihagarika gukina nibindi. Reba iyi nyandiko ifasha Stack Overflow post kubindi bisobanuro.

Ingano

Moderi ifite ubunini butatu butandukanye, buraboneka binyuze mumashuri ahindura kugirango ashyirwe kuri a .modal-dialog. Ingano itera ahantu runaka kugirango wirinde gutambuka gutambitse kumurongo muto.

Ingano	Icyiciro	Ubugari bwubugari
Ntoya	`.modal-sm`	`300px`
Mburabuzi	Nta na kimwe	`500px`
Kinini	`.modal-lg`	`800px`
Kinini cyane	`.modal-xl`	`1140px`

Mburabuzi modal idafite urwego ruhindura igizwe nubunini bwa "medium".

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

Ubundi kurengana nuburyo bwo guhitamo modal ikubiyemo umukoresha kureba, iboneka binyuze mumashuri ahindura ashyirwa kuri a .modal-dialog.

Icyiciro	Kuboneka
`.modal-fullscreen`	Buri gihe
`.modal-fullscreen-sm-down`	Hasi`576px`
`.modal-fullscreen-md-down`	Hasi`768px`
`.modal-fullscreen-lg-down`	Hasi`992px`
`.modal-fullscreen-xl-down`	Hasi`1200px`
`.modal-fullscreen-xxl-down`	Hasi`1400px`

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

Sass

Ibihinduka

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

Umuzingi

Uburyo bwuzuye bwibisubizo byuzuye byakozwe hakoreshejwe $breakpointsikarita nu muzingo 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);
      }
    }
  }
}

Ikoreshwa

Amacomeka ya modal ahinduranya ibintu byihishe kubisabwa, ukoresheje ibiranga data cyangwa JavaScript. Irenze kandi imyitwarire idasanzwe yo kuzunguruka kandi itanga a .modal-backdropkugirango itange ahantu ho gukanda kugirango wirukane moderi yerekanwe mugihe ukanze hanze yuburyo.

Binyuze mu biranga amakuru

Toggle

Kora modal utanditse JavaScript. Shyira data-bs-toggle="modal"ku kintu kigenzura, nka buto, hamwe na a data-bs-target="#foo"cyangwa href="#foo"ugamije uburyo bwihariye bwo guhinduranya.

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

Kwirukana

Kwirukanwa birashobora kugerwaho hamwe na datakiranga kuri buto muri modal nkuko bigaragara hano:

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

cyangwa kuri buto hanze yuburyo ukoresheje data-bs-targetnkuko bigaragara hano:

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

Mugihe inzira zombi zo kwirukana modal zishyigikiwe, uzirikane ko kwirukana hanze modal bidahuye na WAI-ARIA modal dialog igishushanyo mbonera . Kora ibi wowe ubwawe.

Binyuze kuri JavaScript

Kora modal hamwe numurongo umwe wa JavaScript:

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

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-bs-, Nka Muri data-bs-backdrop="".

Izina	Andika	Mburabuzi	Ibisobanuro
`backdrop`	boolean cyangwa umugozi`'static'`	`true`	Harimo modal-backdrop element. Ubundi, vuga `static`kuri backdrop idafunga modal kanda.
`keyboard`	boolean	`true`	Gufunga modal mugihe urufunguzo rwo guhunga rukanda
`focus`	boolean	`true`	Shyira intumbero kuri modal iyo itangijwe.

Uburyo

Uburyo butajegajega ninzibacyuho

Inzira zose za API ntizihuza kandi zitangira inzibacyuho . Basubira kumuhamagara mugihe inzibacyuho itangiye ariko itararangira . Mubyongeyeho, uburyo bwo guhamagarira ibice byinzibacyuho bizirengagizwa .

Reba inyandiko zacu za JavaScript kubindi bisobanuro .

Guhitamo inzira

Koresha ibikubiyemo nkibisanzwe. Emera amahitamo object.

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

guhinduranya

Intoki ihinduranya modal. Garuka kumuhamagara mbere yuburyo bwerekanwe cyangwa bwihishe (ni ukuvuga mbere yuko ibyabaye shown.bs.modalcyangwa hidden.bs.modalibyabaye bibaho).

myModal.toggle()

kwerekana

Nintoki ifungura modal. Garuka kumuhamagara mbere yuburyo bwerekanwe (ni ukuvuga mbere yuko shown.bs.modalibyabaye biba).

myModal.show()

Na none, urashobora gutambutsa ikintu cya DOM nkimpaka zishobora kwakirwa mubyabaye ( relatedTargetnkumutungo).

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

kwihisha

Nintoki ihishe modal. Garuka kumuhamagara mbere yuburyo bwihishe (nukuvuga mbere yuko hidden.bs.modalibyabaye bibaho).

myModal.hide()

Gukoresha

Nintoki uhindure imyanya yuburyo niba uburebure bwa modal ihinduka mugihe ifunguye (nukuvuga mugihe umuzingo ugaragara).

myModal.handleUpdate()

guta

Gusenya ikintu cyuburyo. (Kuraho amakuru yabitswe kubintu bya DOM)

myModal.dispose()

Kubona

Uburyo buhagaze butuma ubona urugero rwerekana ibintu bifitanye isano na DOM

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

GetOrCreateInstance

Uburyo buhamye butuma ubona urugero rwuburyo bujyanye nibintu bya DOM, cyangwa gukora bundi bushya mugihe bitatangijwe

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

Ibyabaye

Icyiciro cya Bootstrap cyerekana ibyabaye bike kugirango bifatanye mubikorwa. Ibintu byose byabaye birasa kuri modal ubwayo (ni ukuvuga kuri <div class="modal">).

Ubwoko bwibyabaye	Ibisobanuro
`show.bs.modal`	Ibirori birasa ako kanya mugihe `show`urugero rwitwa. Niba byatewe no gukanda, ibintu byakanze birahari `relatedTarget`nkumutungo wibyabaye.
`shown.bs.modal`	Ibirori birukanwa mugihe modal yakozwe igaragara kubakoresha (izategereza ko inzibacyuho ya CSS irangira). Niba byatewe no gukanda, ibintu byakanze birahari `relatedTarget`nkumutungo wibyabaye.
`hide.bs.modal`	Ibi birori birahita bisohoka mugihe uburyo `hide`bwurugero bwahamagawe.
`hidden.bs.modal`	Ibirori birukanwa mugihe modal yarangije guhishwa kubakoresha (izategereza ko inzibacyuho ya CSS irangira).
`hidePrevented.bs.modal`	Ibirori birukanwa mugihe modal yerekanwe, inyuma yayo ni `static`no gukanda hanze ya modal cyangwa urufunguzo rwo guhunga rukorwa hamwe na clavier ya clavier cyangwa `data-bs-keyboard`gushiraho `false`.

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