in English

Modal

Tumia programu-jalizi ya modali ya JavaScript ya Bootstrap ili kuongeza vidadisi kwenye tovuti yako kwa visanduku vyepesi, arifa za watumiaji, au maudhui maalum kabisa.

Inavyofanya kazi

Kabla ya kuanza na kijenzi cha modali cha Bootstrap, hakikisha kuwa umesoma yafuatayo kwani chaguzi zetu za menyu zimebadilika hivi majuzi.

Moduli hujengwa kwa HTML, CSS na JavaScript. Zimewekwa juu ya kila kitu kingine kwenye hati na huondoa kusongesha kutoka <body>ili maudhui ya modal yasogeze badala yake.
Kubofya kwenye "mandhari" ya modal kutafunga modali kiotomatiki.
Bootstrap inasaidia tu dirisha moja la modal kwa wakati mmoja. Miundo iliyopachikwa haitumiki kwa kuwa tunaamini kuwa matumizi mabaya ya watumiaji.
Modals use position: fixed, ambayo wakati mwingine inaweza kuwa maalum kidogo juu ya utoaji wake. Inapowezekana, weka HTML yako ya modali katika nafasi ya juu ili kuepuka kuingiliwa kwa vipengele vingine. Huenda utakumbana na matatizo wakati wa kuweka kiota .modalndani ya kipengele kingine kisichobadilika.
Kwa mara nyingine tena, kutokana na position: fixed, kuna baadhi ya tahadhari za kutumia moduli kwenye vifaa vya rununu. Tazama hati zetu za usaidizi wa kivinjari kwa maelezo.
Kutokana na jinsi HTML5 inavyofafanua semantiki zake, sifa ya autofocusHTML haina athari katika miundo ya Bootstrap. Ili kufikia athari sawa, tumia JavaScript maalum:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Athari ya uhuishaji ya kipengele hiki inategemea prefers-reduced-motionhoja ya midia. Tazama sehemu ya mwendo iliyopunguzwa ya hati zetu za ufikivu .

Endelea kusoma kwa maonyesho na miongozo ya matumizi.

Mifano

Chini ni mfano tuli wa modal (ikimaanisha kuwa yake positionna displayimebatilishwa). Imejumuishwa ni kichwa cha modali, mwili wa modali (inahitajika kwa padding), na kijachini cha modali (si lazima). Tunaomba ujumuishe vichwa vya modal na vitendo vya kuondoa kila inapowezekana, au utoe hatua nyingine ya wazi ya kukataa.

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

Onyesho la moja kwa moja

Geuza onyesho la modali ya kufanya kazi kwa kubofya kitufe kilicho hapa chini. Itateleza chini na kufifia kutoka juu ya ukurasa.

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

Mandhari tuli

Mandhari ya nyuma yanapowekwa kuwa tuli, modali haitafungwa wakati wa kubofya nje yake. Bofya kitufe kilicho hapa chini ili kuijaribu.

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

Inasogeza maudhui marefu

Miundo inapokua ndefu sana kwa kituo cha kutazama au kifaa cha mtumiaji, husogeza bila ya ukurasa wenyewe. Jaribu onyesho hapa chini ili kuona tunamaanisha nini.