in English

Modal

Pêveka modal a JavaScript-ê ya Bootstrap bikar bînin da ku ji bo sivik, agahdariya bikarhêner, an naveroka tevahî xwerû diyalogan li malpera xwe zêde bikin.

Çawa dixebite

Berî ku hûn dest bi pêkhateya modal a Bootstrap-ê bikin, pê ewle bin ku hûn jêrîn bixwînin ji ber ku vebijarkên menuya me di van demên dawî de hatine guhertin.

Modal bi HTML, CSS, û JavaScriptê têne çêkirin. Ew li ser her tiştê din di belgeyê de cih digirin û ji pelgeyê derdixin <body>da ku naveroka modal li şûna wê bizivire.
Bi tikandina li ser modal "backdrop" dê modal bixweber bigire.
Bootstrap tenê yek carî pencereyek modal piştgirî dike. Modalên nested nayên piştgirî kirin ji ber ku em bawer dikin ku ew ezmûnên bikarhêner ên xizan in.
Modal bikar tînin position: fixed, ku carinan dikare di derbarê vegotina wê de hinekî taybetî be. Kengê ku gengaz be, HTML-a xweya modal li cîhek asta jorîn bi cîh bikin da ku ji destwerdana potansiyel a hêmanên din dûr bikevin. .modalDema ku hûn di nav hêmanek din a sabît de nehêlin hûn ê di nav pirsgirêkan de derkevin .
Careke din, ji ber position: fixed, di karanîna modalên li ser cîhazên mobîl de hin hişyarî hene. Ji bo hûragahiyan li belgeyên piştevaniya geroka me binêrin.
Ji ber ku HTML5 çawa semantîka xwe diyar dike, taybetmendiya autofocusHTML -ê di modalên Bootstrap de bandorek nake. Ji bo bidestxistina heman bandorê, hin JavaScript-a xwerû bikar bînin:

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

Bandora anîmasyonê ya vê hêmanê bi pirsa prefers-reduced-motionmedyayê ve girêdayî ye. Binêre beşa tevgera kêmkirî ya belgeya gihîştina me .

Ji bo demo û rêbernameyên karanîna xwendinê bidomînin.

Examples

Li jêr mînakek modal a statîk heye (wateya wê positionû displayhatî rakirin). Di nav de sernivîsa modal, laşê modal (ji bo pêdivî ye padding), û pêlava modal (vebijarkî) hene. Em daxwaz dikin ku hûn sernavên modal bi çalakiyên betalkirinê re her ku dibe bila bibin, an jî çalakiyek din a betalkirina eşkere peyda bikin.

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

Demo zindî

Bi tikandina bişkoja li jêr, demoyek modal a xebitandinê bişkînin. Ew ê ji jorê rûpelê ve biçe xwarê û têkeve hundur.

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

Backdrop statîk

Dema ku paşperdeya li ser statîk tê danîn, dema ku li derveyî wê bitikîne modal girtî nabe. Bişkojka jêrîn bikirtînin da ku wê biceribînin.

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

Scrolling naveroka dirêj

Dema ku modal ji bo dîmendera bikarhêner an cîhaza bikarhêner pir dirêj dibin, ew ji rûpelê bixwe dimeşin. Demoya jêrîn biceribînin ku em bibînin ka mebesta me çi ye.