Modal

Baara kɛ ni Bootstrap ka JavaScript modal plugin ye walasa ka kumasenw fara i ka yɔrɔ kan walasa ka yeelenbɔlanw sɔrɔ, ka baarakɛlaw ka kunnafoniw sɔrɔ, walima ka kunnafoniw sɔrɔ minnu bɛ kɛ ka kɛɲɛ ni u yɛrɛ sago ye pewu.

A bɛ baara kɛ cogo min na

Sani aw ka Bootstrap ka modal component daminɛ, aw ye aw jija ka ninnu kalan bawo an ka menu suganditaw Changé kɔsa in na.

Modaliw bɛ jɔ ni HTML, CSS ani JavaScript ye. U bɛ jɔ sɛbɛn kɔnɔ fɛn tɔw bɛɛ kan ani ka sɛrɛkili Bɔ a <body>la walasa modal kɔnɔkow ka sɛrɛkiliw Kɛ o nɔ na.
Ni i ye modal “backdrop” digi, o bɛna modal datugu a yɛrɛma.
Bootstrap bɛ modal window kelen dɔrɔn de dɛmɛ a waati kelen na. Nested modals tɛ dɛmɛn bawo an dalen b’a la k’u ye baarakɛcogo juguw ye.
Modals use position: fixed, min bɛ Se ka Kɛ kɛrɛnkɛrɛnnenya la dɔɔnin a ka baarakɛcogo la tuma dɔw la. Ni aw bɛ se tuma o tuma, aw bɛ aw ka HTML modali bila sanfɛyɔrɔ la walasa ka aw yɛrɛ tanga fɛn wɛrɛw ma minnu bɛ se ka don a la. A ka c’a la, i bɛ boli ka gɛlɛyaw sɔrɔ ni i bɛ nesting a .modalkɔnɔ fɛn jɔlen wɛrɛ kɔnɔ.
Nin sen in fana na, k’a sababu kɛ position: fixed, lasɔmini dɔw bɛ yen ni baara kɛli ye ni modaliw ye telefɔni selilɛriw kan. Aw ye an ka navigatɛri dɛmɛ sɛbɛnw lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ.
K’a sababu Kɛ HTML5 b’a kɔrɔko ɲɛfɔ cogo min na, HTML autofocusfɛnɲɛnɛma tɛ nɔ Blà Bootstrap modaliw la. Walasa ka o nɔ kelen sɔrɔ, baara kɛ ni JavaScript dɔw ye minnu bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye:

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

Nin yɔrɔ in ka animation nɔ bɛ bɔ prefers-reduced-motionmedia ɲininkali de la. aw ye an ka sɔrɔli sɛbɛnw yɔrɔ lajɛ min bɛ lamaga dɔgɔyalen na .

Aw bɛ to ka kalan kɛ walasa ka demow ni baarakɛcogo ɲɛfɔlenw sɔrɔ.

Misaliw

Dugukolo kan, misali modal statikiposition (o kɔrɔ ye a ni displaya ye overridden) ye. O la, modal kunkolo, modali farikolo (a wajibiyalen don padding), ani modal footer (a bɛ se ka kɛ a yɛrɛ sago ye). An b’a ɲini aw fɛ aw ka modal headers don ni bɔli walew ye ni a bɛ se ka kɛ tuma o tuma, walima ka bɔli wale jɛlen wɛrɛ di.

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

Toggle a working modal demo ni i ye butɔni digi min bɛ duguma. A bɛna sɛgɛn ka jigin ka tunun ka bɔ ɲɛ sanfɛ.

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

Ni kɔkanna bilalen don statiki la, modal tɛna da tugu ni i ye a kɔkanna digi. Butɔn digi min bɛ duguma walasa k’a lajɛ.

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

Kɔnɔkow janyalenw sɛgɛsɛgɛli

Ni modɛliw janyalen don kojugu baarakɛla ka filɛli-yɔrɔ walima minɛn na, u bɛ 'sèn Bɔ u yɛrɛ ma ɲɛ yɛrɛ la. Aw ye demo min bɛ duguma, o lajɛ walasa k’a dɔn an b’a fɛ ka min fɔ.