Source

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.

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:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('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" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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-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-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</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.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

A tsaye a tsakiya

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</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-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 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-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>

Maɓallin abun ciki na modal

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-* (wataƙila ta hanyar jQuery ) don bambanta abubuwan da ke cikin modal dangane da wanne 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-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <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-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

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" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Matsakaicin tsayi

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

Dama

Tabbatar ƙarawa role="dialog"da aria-labelledby="...", yin nuni ga taken modal, zuwa .modal, da role="document"kanta .modal-dialog. Bugu da ƙari, kuna iya ba da bayanin yanayin maganganun ku tare da aria-describedbykan .modal.

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

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Amfani

Modal plugin yana jujjuya abubuwan da ke ɓoye akan buƙatu, ta hanyar sifofin bayanai ko JavaScript. Hakanan yana ƙarawa .modal-opendon <body>soke halayen gungurawa na asali kuma yana haifar da .modal-backdropdon samar da wurin dannawa don korar samfuran da aka nuna lokacin danna waje tsarin.

Ta hanyar bayanan halayen

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

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

Ta hanyar JavaScript

Kira modal tare da id myModaltare da layi ɗaya na JavaScript:

$('#myModal').modal(options)

Zabuka

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

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

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 .

.modal(options)

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

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

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').modal('toggle')

.modal('show')

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

$('#myModal').modal('show')

.modal('hide')

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

$('#myModal').modal('hide')

.modal('handleUpdate')

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

$('#myModal').modal('handleUpdate')

.modal('dispose')

Yana lalata tsarin sinadari.

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
nuna.bs.modal Wannan taron yana gobara nan da nan lokacin da showaka kira hanyar misali. Idan dannawa ya haifar, ana samun ɓangaren da aka latsa azaman relatedTargetmallakin taron.
nuna.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 relatedTargetmallakin taron.
boye.bs.modal Ana korar wannan taron nan da nan lokacin da hideaka kira hanyar misali.
boye.bs.modal Ana korar wannan taron lokacin da tsarin ya gama ɓoyewa daga mai amfani (zai jira canjin CSS ya kammala). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})