in English

Modal

Yi amfani da Bootstrap's JavaScript modal plugin don ƙara maganganu zuwa rukunin yanar gizonku don akwatunan haske, sanarwar mai amfani, ko abun ciki na al'ada gabaɗaya.

A wannan shafi

Yadda yake aiki

Kafin farawa da kayan aikin Bootstrap, tabbatar da karanta masu zuwa kamar yadda zaɓuɓɓukan menu ɗinmu sun canza kwanan nan.

An gina su tare da HTML, CSS, da JavaScript. An sanya su a kan duk wani abu a cikin takaddar kuma cire gungurawa daga <body>abin da ke ciki don gungurawa maimakon.
Danna kan modal "backdrop" zai rufe tsarin ta atomatik.
Bootstrap yana goyan bayan taga modal guda ɗaya kawai. Ba a samun tallafi ga ƙayyadaddun ƙayyadaddun ƙayyadaddun ƙayyadaddun tsarin kamar yadda muka yi imani da su rashin ƙwarewar mai amfani ne.
Modal amfani position: fixed, wanda wani lokaci na iya zama na musamman game da ma'anarsa. A duk lokacin da zai yiwu, sanya HTML ɗin ku a cikin babban matsayi don guje wa yuwuwar tsangwama daga wasu abubuwa. Wataƙila za ku gamu da matsala yayin da kuke yin gida a .modalcikin wani tsayayyen kashi.
Har yanzu, saboda position: fixed, akwai wasu fa'idodi tare da amfani da modal akan na'urorin hannu. Duba takaddun tallafin burauzan mu don cikakkun bayanai.
Saboda yadda HTML5 ke bayyana ma'anar tarukan sa, sifa ta autofocusHTML ba ta da wani tasiri a cikin tsarin Bootstrap. Don cimma sakamako iri ɗaya, yi amfani da wasu JavaScript na al'ada:

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

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

Tasirin raye-rayen wannan bangaren ya dogara ne da prefers-reduced-motiontambayar kafofin watsa labarai. Dubi raguwar sashin motsi na takaddun damar mu .

Ci gaba da karantawa don demos da jagororin amfani.

Misalai

A ƙasa akwai misali a tsayeposition (yana nufin sa kuma displayan shafe shi). An haɗa su da taken modal, jikin modal (da ake buƙata don padding), da ƙafar ƙafa (na zaɓi). Muna roƙonku ku haɗa masu kan layi tare da ayyukan korar duk lokacin da zai yiwu, ko samar da wani matakin korar bayyane.

<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

Juya tsarin demo na aiki ta danna maɓallin da ke ƙasa. Zai zame ƙasa ya dushe daga saman shafin.

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

A tsaye

Lokacin da aka saita bayanan baya zuwa tsaye, tsarin ba zai rufe ba lokacin danna wajensa. Danna maɓallin da ke ƙasa don gwada shi.

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

Gungura dogon abun ciki

Lokacin da tsarin ya yi tsayi da yawa don kallon mai amfani ko na'urar, suna gungurawa ba tare da shafin kanta ba. Gwada demo na ƙasa don ganin abin da muke nufi.

Hakanan zaka iya ƙirƙirar tsarin gungurawa wanda ke ba da damar gungura jikin modal ta ƙara .modal-dialog-scrollablezuwa .modal-dialog.

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

A tsaye a tsakiya

Ƙara .modal-dialog-centeredzuwa .modal-dialoga tsaye a tsakiyar tsarin.

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

Za a iya sanya tukwici da ƙwaƙƙwaran kayan aiki a cikin tsari kamar yadda ake buƙata. Lokacin da aka rufe modal, duk wani nasihu na kayan aiki da popovers a ciki suma ana korarsu ta atomatik.

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

Amfani da grid

Yi amfani da tsarin grid na Bootstrap a cikin modal ta hanyar gida .container-fluida cikin .modal-body. Bayan haka, yi amfani da azuzuwan tsarin grid na yau da kullun kamar yadda kuke yi a ko'ina.

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

Kuna da gungun maɓallai waɗanda duk ke haifar da modal iri ɗaya tare da abun ciki daban-daban? Yi amfani event.relatedTargetda halayen HTMLdata-bs-* don bambanta abubuwan da ke cikin tsarin ya danganta da wane maballin da aka danna.

A ƙasa akwai nunin raye-raye mai biye da misalin HTML da JavaScript. Don ƙarin bayani, karanta takaddun abubuwan abubuwan da suka faru don cikakkun bayanai akan 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
})

Juyawa tsakanin modal

Canja tsakanin ma'auni da yawa tare da wasu wayo na jeri data-bs-targetda data-bs-togglehalaye. Misali, zaku iya kunna tsarin sake saitin kalmar sirri daga cikin tsarin shigar da aka riga aka bude. Lura da yawa moals ba zai iya buɗewa a lokaci guda -yanzu tubgles tsakanin daban-daban daban daban modals.

Bude modal na farko

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

Canza rayarwa

Mai $modal-fade-transformcanzawa yana ƙayyadad da yanayin canji na .modal-dialogkafin modal fade-in animation, $modal-show-transformmadaidaicin yana ƙayyade canjin .modal-dialoga ƙarshen modal fade-in animation.

Idan kana son misali motsin zuƙowa, za ka iya saita $modal-fade-transform: scale(.8).

Cire rayarwa

Don ƙirar ƙirar da kawai ke bayyana maimakon faɗuwa don dubawa, cire .fadeajin daga alamar ƙirar ku.

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

Matsakaicin tsayi

Idan tsayin modal ya canza yayin buɗewa, ya kamata ka kira myModal.handleUpdate()don daidaita matsayin modal idan gungura ya bayyana.

Dama

Tabbatar ƙara aria-labelledby="...", yin magana da taken modal, zuwa .modal. Bugu da ƙari, kuna iya ba da bayanin yanayin maganganun ku tare da aria-describedbykan .modal. Lura cewa ba kwa buƙatar ƙarawa role="dialog"tunda mun riga mun ƙara ta JavaScript.

Shigar da bidiyon YouTube

Shigar da bidiyon YouTube a cikin ƙirar yana buƙatar ƙarin JavaScript ba a cikin Bootstrap don dakatar da sake kunnawa ta atomatik da ƙari ba. Dubi wannan taimako mai taimako Stack Overflow post don ƙarin bayani.

Girman zaɓi

Modals suna da girma dabam na zaɓi uku, ana samun su ta azuzuwan gyara don sanya su akan .modal-dialog. Waɗannan masu girma dabam suna shiga a wasu wuraren karya don guje wa maƙallan gungurawa a kwance akan kunkuntar wuraren kallo.

Girman	Class	Modal max-nisa
Karami	`.modal-sm`	`300px`
Default	Babu	`500px`
Babba	`.modal-lg`	`800px`
Babban babba	`.modal-xl`	`1140px`

Modal ɗinmu na asali ba tare da ajin gyara ba ya ƙunshi tsarin girman “matsakaici”.

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

Wani ƙetare shi ne zaɓi don fito da tsari wanda ke rufe tashar kallon mai amfani, samuwa ta hanyar azuzuwan gyara waɗanda aka sanya akan .modal-dialog.

Class	samuwa
`.modal-fullscreen`	Koyaushe
`.modal-fullscreen-sm-down`	A ƙasa`576px`
`.modal-fullscreen-md-down`	A ƙasa`768px`
`.modal-fullscreen-lg-down`	A ƙasa`992px`
`.modal-fullscreen-xl-down`	A ƙasa`1200px`
`.modal-fullscreen-xxl-down`	A ƙasa`1400px`

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

Sass

Masu canji

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

Madauki

Ana samar da tsarin cikakken allo mai amsa ta $breakpointstaswira da madauki a ciki 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);
      }
    }
  }
}

Amfani

Modal plugin yana jujjuya abubuwan da ke ɓoye akan buƙatu, ta hanyar sifofin bayanai ko JavaScript. Hakanan yana ƙetare dabi'un gungurawa na asali kuma yana haifar da .modal-backdropdon samar da wurin dannawa don korar samfuran da aka nuna lokacin dannawa wajen modal.

Ta hanyar bayanan halayen

Juyawa

Kunna modal ba tare da rubuta JavaScript ba. Saita data-bs-toggle="modal"a kan abin sarrafawa, kamar maɓalli, tare da data-bs-target="#foo"ko href="#foo"don ƙaddamar da takamaiman tsari don juyawa.

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

Korar

Ana iya samun korarwa tare da datasifa akan maɓalli a cikin tsari kamar yadda aka nuna a ƙasa:

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

ko a kan maɓalli a waje da modal ta amfani da data-bs-targetkamar yadda aka nuna a ƙasa:

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

Duk da yake ana goyan bayan hanyoyin biyu don korar modal, ku tuna cewa korar daga waje modal bai dace da tsarin ƙirar ƙirar maganganu na WAI-ARIA ba . Yi wannan a kan hadarin ku.

Ta hanyar JavaScript

Ƙirƙiri modal tare da layi ɗaya na JavaScript:

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

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-bs-, kamar a cikin data-bs-backdrop="".

Suna	Nau'in	Default	Bayani
`backdrop`	boolean ko kirtani`'static'`	`true`	Ya ƙunshi nau'in modal-backdrop. A madadin, saka `static`don bayanan baya wanda baya rufe tsarin a dannawa.
`keyboard`	boolean	`true`	Yana rufe tsarin lokacin da aka danna maɓallin guduwa
`focus`	boolean	`true`	Yana sanya mayar da hankali kan modal lokacin da aka fara.

Hanyoyin

Hanyoyi masu daidaitawa da canji

Duk hanyoyin API ba daidai ba ne kuma suna fara canji . Suna komawa ga mai kiran da zarar an fara canji amma kafin ya ƙare . Bugu da ƙari, za a yi watsi da kiran hanya akan ɓangaren canji .

Duba takaddun JavaScript ɗin mu don ƙarin bayani .

Zaɓuɓɓukan wucewa

Yana kunna abun cikin ku azaman tsari. Yana yarda da zaɓin zaɓi object.

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

juya

Da hannu yana jujjuya modal. Komawa ga mai kira kafin a nuna tsarin a zahiri ko ɓoye (watau kafin abin shown.bs.modalko hidden.bs.modalabin ya faru).

myModal.toggle()

nuna

Da hannu yana buɗe modal. Komawa ga mai kira kafin a nuna ainihin tsari (watau kafin shown.bs.modalabin ya faru).

myModal.show()

Hakanan, zaku iya ƙaddamar da kashi na DOM azaman hujja wanda za'a iya karɓa a cikin abubuwan da suka faru (a matsayin relatedTargetdukiya).

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

boye

Da hannu yana ɓoye modal. Komawa ga mai kira kafin a ɓoye tsarin (watau kafin hidden.bs.modalabin ya faru).

myModal.hide()

rikeUpdate

Da hannu gyara yanayin modal idan tsayin tsarin yana canzawa yayin buɗewa (watau idan gungura ya bayyana).

myModal.handleUpdate()

jefar

Yana lalata tsarin sinadari. (Yana cire bayanan da aka adana akan ɓangaren DOM)

myModal.dispose()

samunInstance

Hanyar a tsaye wacce ke ba ku damar samun misalan modal mai alaƙa da ɓangaren DOM

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

samunOrCreateInstance

Hanyar da ta dace wacce ke ba ku damar samun misalan yanayin da ke da alaƙa da abin DOM, ko ƙirƙirar sabo idan ba a fara shi ba.

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

Abubuwan da suka faru

Ajin modal na Bootstrap yana fallasa ƴan abubuwan da suka faru don haɗawa cikin ayyukan modal. Duk abubuwan da suka faru na modal ana harba su akan modal kanta (watau a <div class="modal">).

Nau'in taron	Bayani
`show.bs.modal`	Wannan taron yana gobara nan da nan lokacin da `show`aka kira hanyar misali. Idan dannawa ya haifar, ana samun ɓangaren da aka latsa azaman `relatedTarget`mallakin taron.
`shown.bs.modal`	Ana korar wannan taron lokacin da aka bayyana yanayin ga mai amfani (zai jira canjin CSS ya kammala). Idan dannawa ya haifar, ana samun ɓangaren da aka latsa azaman `relatedTarget`mallakin taron.
`hide.bs.modal`	Ana korar wannan taron nan da nan lokacin da `hide`aka kira hanyar misali.
`hidden.bs.modal`	Ana korar wannan taron lokacin da tsarin ya gama ɓoyewa daga mai amfani (zai jira canjin CSS ya kammala).
`hidePrevented.bs.modal`	Ana korar wannan taron lokacin da aka nuna modal, bayanansa yana `static`kuma danna waje da tsarin ko danna maɓallin tserewa tare da zaɓin madannai ko `data-bs-keyboard`saita zuwa `false`.

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