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.

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 tambayarka cewa ka haɗa da manyan kanun labarai tare da korar ayyuka a 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="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" 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="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

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-toggle="modal" data-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="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">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.