Source

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

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

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" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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ɔ.

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

Aw bɛ se fana ka modal scrollable dɔ da min bɛ sira di scroll modal farikolo ma ni farali .modal-dialog-scrollableye .modal-dialog.

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

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">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 bɛ cɛmancɛ jɔlen na

A fara a .modal-dialog-centeredkan ka .modal-dialogmodal cɛmancɛ la vertically.

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

Baarakɛminɛnw ni popovers

Baarakɛminɛnw ni popovers bɛ se ka bila modaliw kɔnɔ i n’a fɔ a mago bɛ cogo min na. Ni modɛliw datugulen don, baarakɛminɛnw ni popover minnu bɛ kɔnɔ, olu fana bɛ bɔ u yɛrɛ la.

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

Baara kɛ ni grid ye

Baara kɛ ni Bootstrap grid system ye modal kɔnɔ ni nesting .container-fluidye .modal-body. O kɔfɛ, baara kɛ ni normal grid system classes ye i n’a fɔ aw bɛ baara kɛ cogo min na yɔrɔ wɛrɛw la.

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

Modal kɔnɔkow caman ɲɔgɔnna

Yala butɔni kulu dɔ bɛ aw bolo minnu bɛɛ bɛ modɛli kelen daminɛ ni kɔnɔkow tɛ kelen ye dɔɔnin wa? Baara kɛ event.relatedTargetni HTML data-*fɛnw ye (a bɛ se ka kɛ jQuery fɛ ) walasa ka modal kɔnɔkow caman ɲɔgɔn falen ka kɛɲɛ ni butɔni min digilen don.

Jigin na, ɲɛjirali ɲɛnama dɔ bɛ yen min bɛ tugu misali HTML ni JavaScript kɔ. Walasa ka kunnafoni wɛrɛw sɔrɔ, aw ye modal events docs kalan walasa ka kunnafoni wɛrɛw sɔrɔ 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)
})

Animasiyɔn caman Changer

O $modal-fade-transformbεε bε bεnkansεbεn cogoya jira .modal-dialogka kɔn modal fade-in animation ɲɛ, $modal-show-transformbεnkansεbεn bε bεnkansεbεn jira min bε bεnkansεbεn .modal-dialogin laban na modal fade-in animation.

Ni aw b’a fɛ misali la zoom-in animation, aw bɛ se ka $modal-fade-transform: scale(.8).

Animatɛriw bɔ yen

Ni modaliw bɛ bɔ dɔrɔn sanni u ka fade in ka lajɛ, i ka .fadekalasi bɔ i ka modali taamasiyɛn na.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Dinamiki sanfɛyɔrɔw

Ni modɛli dɔ janya bɛ Changé k’a sɔrɔ a dabɔlen don, i ka kan ka weleli $('#myModal').modal('handleUpdate')kɛ walasa ka modal jɔyɔrɔ ladilan kokura ni scrollbar dɔ bɔra.

Seko ni dɔnko

Aw ye aw jija ka fara role="dialog"ani aria-labelledby="...", ka ɲɛsin modɛli tɔgɔ ma, ka .modal, ani role="document"ka fara a .modal-dialogyɛrɛ kan. Ka fara o kan, aw bɛ se ka ɲɛfɔli kɛ aw ka modal dialogue kan ni aria-describedbyon ye .modal.

YouTube wideyow doncogo

YouTube wideyow donli modaliw kɔnɔ, o bɛ JavaScript wɛrɛw de wajibiya minnu tɛ Bootstrap kɔnɔ walasa ka fɔli jɔ a yɛrɛma ani fɛn wɛrɛw. Aw ye nin dɛmɛnan Stack Overflow post lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ.

Hakɛw minnu bɛ se ka kɛ i yɛrɛ sago ye

Modalw bɛ ni hakɛ saba ye minnu bɛ se ka sugandi, minnu bɛ sɔrɔ modifier classes fɛ ka bila a kan .modal-dialog. O hakɛw bɛ Dòn kariyɔrɔ dɔw la walasa ka 'sèn Bɔ 'sènfɛ-sɛbɛnni-yɔrɔw la minnu ka surun.

Kundama Kilasi Modal max-largeur ye
Fitinin .modal-sm 300px
Fɔlɔ Foɲisi 500px
Belebeleba .modal-lg 800px
A ka bon kosɛbɛ .modal-xl 1140px

An ka modɛli default sans modifier class bɛ Kɛ “medium” size modal ye.

<!-- 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" role="document">
    <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" role="document">
    <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" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Baarakɛcogo

Modal plugin bɛ i ka kunnafoni dogolenw sɛgɛsɛgɛ ni ɲinini kɛra, data attributes walima JavaScript fɛ. A fana bɛ dɔ Fàra o kan .modal-openka ' <body>sèn Bɔ 'sènfɛ-sɛbɛnni kɛcogo kɔrɔ la ani ka a Lawuli .modal-backdropwalasa ka 'kùnkolo-yɔrɔ Di walasa ka modal jiralenw Bɔ ni 'klikli Kɛ modal kɔkan.

Ka tɛmɛn donanw ka fɛnw kan

Modal dɔ baara k’a sɔrɔ i ma JavaScript sɛbɛn. A sigilen data-toggle="modal"bɛ controleur element dɔ kan, i n’a fɔ butɔni, ka fara a kan data-target="#foo"walima href="#foo"ka target modal kɛrɛnkɛrɛnnen dɔ toggle.

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

JavaScript fɛ

Modal dɔ wele ni id myModalye ni JavaScript sɛrɛ kelen ye:

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

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-, i n’a fɔ a bɛ cogo min na data-backdrop="".

Tɔ̀gɔ Ka sɛbɛen masin na Fɔlɔ Cogojirali
kɔkannakow boolean walima jiribolo'static' sɛbɛ Modal-backdrop element dɔ bɛ a kɔnɔ. O cogo kelen na, i ka ɲɛfɔli statickɛ kɔkanna dɔ kan min tɛ modal da tugu ni click walima escape key press kan.
klaviyeti ye boolean ye sɛbɛ A bɛ modal da tugu ni escape key digilen don
ɲɛsin boolean ye sɛbɛ A bɛ sinsin kɛ modal kan ni a daminɛna.
k'a jira boolean ye sɛbɛ A bɛ modɛli jira ni a daminɛna.

Fɛɛrɛw

Fɛɛrɛ minnu tɛ kelen ye ani fɛn caman tigɛli

API fɛɛrɛw bɛɛ ye asynchrone ye ani ka tɛmɛsira dɔ daminɛ . u bɛ segin welebaga ma ni wuli daminɛna dɔrɔn nka sanni a ka ban . Ka fara o kan, fɛɛrɛ weleli min bɛ kɛ tɛmɛsira yɔrɔ dɔ kan, o bɛna jate .

aw ye an ka JavaScript sɛbɛnw lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ .

.modal(options)

A bɛ i ka kɔnɔkow baara i n’a fɔ modal. A bɛ sɔn sugandiliw ma minnu bɛ se ka kɛ object.

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

.modal('toggle')

A bɛ modal dɔ wuli ni bolo ye. A bɛ Segin welebaga ma sani modal ka jira tiɲɛ na walima ka dogo (o kɔrɔ ye ko sanni shown.bs.modalwalima hidden.bs.modalko kɛlen ka Kɛ).

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

.modal('show')

A bɛ modal dɔ da wuli ni bolo ye. A bɛ Segin welebaga ma sani modal ka jira tiɲɛ na (o kɔrɔ ye ko sanni ko shown.bs.modalin ka Kɛ).

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

.modal('hide')

A bɛ modal dɔ dogo ni bolo ye. A bɛ Segin welebaga ma sani modɛli ka dogo tiɲɛ na (o kɔrɔ ye ko sani ko hidden.bs.modalin ka Kɛ).

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

.modal('handleUpdate')

Modali jɔyɔrɔ ladilan ni bolo ye ni modali dɔ janya bɛ Changé ka a to da wulilen (o kɔrɔ ye ko ni sɛrɛkili dɔ bɔra).

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

.modal('dispose')

A bɛ element dɔ ka modal tiɲɛ.

Ko minnu kɛra

Bootstrap ka modal class bɛ ko damadɔw jira kɛnɛ kan walasa ka hooking kɛ modal baarakɛcogo la. Modal ko kɛlenw bɛɛ bɛ tasuma don modali yɛrɛ la (o kɔrɔ ye ko <div class="modal">).

Ko kɛlen suguya Cogojirali
jira.bs.modal O ko in bɛ tasuma Bɔ o yɔrɔnin bɛɛ ni showmisali fɛɛrɛ Weelera. Ni a sababu Bɔra klikɛli la, fɛn min digilen dòn, o bɛ Sɔrɔ i n’a fɔ relatedTargetko kɛlen in nafa.
jiralen.bs.modal O ko in bɛ Fɔ ni modal Kɛra ka Ye baarakɛla fɛ (a bɛna CSS 'tɛmɛsiraw makɔnɔ ka Ban). Ni a sababu Bɔra klikɛli la, fɛn min digilen dòn, o bɛ Sɔrɔ i n’a fɔ relatedTargetko kɛlen in nafa.
dogo.bs.modal ye O ko in bɛ Fɔ o yɔrɔnin bɛɛ ni hidemisali fɛɛrɛ Weelera.
dogolen.bs.modal O ko in bɛ Fɔ ni modal ye dogolen Ban baarakɛla la (a bɛna CSS 'tɛmɛsiraw makɔnɔ u ka ban).
dogoPreventé.bs.modal ye O ko in bɛ Fɔ ni modal jirala, a kɔkanna ye staticani clic dɔ bɛ modal kɔkan walima escape key press bɛ Kɛ. 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})