Modal a wɔde di dwuma

Fa Bootstrap JavaScript modal plugin no di dwuma fa nkɔmmɔbɔ ahorow ka wo sait no ho ma kanea nnaka, ɔdefo amanneɛbɔ, anaa nsɛm a wɔahyɛ da ayɛ koraa.

Sɛnea ɛyɛ adwuma

Ansa na wobɛhyɛ aseɛ de Bootstrap no modal component no, hwɛ sɛ wobɛkenkan deɛ ɛdidi soɔ yi ɛfiri sɛ yɛn menu options no asesa nnansa yi ara.

Wɔde HTML, CSS, ne JavaScript na ɛkyekyere modals. Wɔde wɔn asi biribiara a aka wɔ krataa no mu so na woyi scroll no fi mu <body>sɛnea ɛbɛyɛ a modal content scrolls mmom.
Sɛ wobɔ modal “backdrop” no so a, ɛbɛto modal no mu ankasa.
Bootstrap boa modal window baako pɛ wɔ bere koro mu. Nested modals no nnyɛ mmoa sɛnea yegye di sɛ ɛyɛ osuahu a enye a wɔde di dwuma no.
Modals de position: fixed, a ɛtɔ mmere bi a ebetumi ayɛ pɔtee kakra wɔ ne nkyerɛase ho. Bere biara a ɛbɛyɛ yiye no, fa wo modal HTML no to gyinabea a ɛkorɔn so na woakwati nneɛma afoforo a ebetumi atwitware mu. Ɛda adi sɛ wobɛtu mmirika akɔ nsɛm mu bere a woreyɛ nesting a .modalwɔ fixed element foforo mu no.
Saa bere yi nso, esiane position: fixed, kɔkɔbɔ ahorow bi wɔ hɔ a ɛfa modals a wɔde di dwuma wɔ mobile mfiri ahorow so ho. Hwɛ yɛn browser support docs no ma nsɛm no mu nsɛm.
Esiane sɛnea HTML5 kyerɛkyerɛ ne nkyerɛase mu nti, HTML autofocussu no nni nkɛntɛnso biara wɔ Bootstrap modals mu. Sɛ wopɛ sɛ wunya nkɛntɛnso koro no ara a, fa JavaScript bi a wɔahyɛ da ayɛ di dwuma:

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

Animation nkɛntɛnso a ɛwɔ saa ade yi mu no gyina prefers-reduced-motionmedia asɛmmisa no so. Hwɛ yɛn akwan a wɔfa so nya nneɛma ho nkrataa no fã a wɔatew so no .

Kɔ so kenkan ma demos ne akwankyerɛ a wɔde di dwuma.

Nhwɛso ahorow

Ase hɔ no yɛ static modal nhwɛso (a ɛkyerɛ sɛ ne positionna displaywɔabɔ so). Nea ɛka ho ne modal header, modal body (a ɛho hia ma padding), ne modal footer (a wopɛ). Yɛsrɛ sɛ fa modal headers a ɛwɔ dismiss actions ka ho bere biara a ɛbɛyɛ yiye, anaasɛ fa dismiss action foforo a ɛda adi pefee ma.

<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 a ɛwɔ hɔ

Toggle modal demo a ɛreyɛ adwuma denam button a ɛwɔ ase ha no a wobɛma so. Ɛbɛtwetwe akɔ fam na ɛbɛyera afi kratafa no atifi.

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

Static akyi mfonini

Sɛ wɔde backdrop no si static so a, modal no rentoto mu bere a worebɔ wɔ n’akyi no. Klik bɔtn a ɛwɔ ase hɔ no so na sɔ hwɛ.

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

Nsɛm a ɛware a wobɛtwetwe

Sɛ modals yɛ tenten dodo ma ɔdefo no viewport anaa device a, ɛtwetwe a ɛde ne ho fi krataafa no ankasa ho. Sɔ demo a ɛwɔ ase ha no hwɛ na hwɛ nea yɛpɛ sɛ yɛka.

What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.

Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground.

Just own the night like the 4th of July! I’m gon’ put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I’m gon’ put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.

You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by?

Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.

We'd keep all our promises be us against the world. If you get the chance you better keep her. It's time to bring out the big, big, big, big, big, big balloons. I hope you got a healthy appetite. Don't let the greatness get you down, oh, oh yeah. Yeah, she's footloose and so fancy free. I want the jaw droppin', eye poppin', head turnin', body shockin'. End of the rainbow looking treasure.

Wubetumi nso ayɛ modal a wotumi twetwe a ɛma kwan ma wotumi twetwe modal nipadua no denam ka a wode bɛka ho .modal-dialog-scrollableno so .modal-dialog.

What follows is just some placeholder text for this modal dialog. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

We'd keep all our promises be us against the world. In another life I would be your girl. We can dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching tattoos. So open up your heart and just let it begin. 'Cause she's the muse and the artist. She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I know one spark will shock the world, yeah yeah. If you only knew what the future holds.

Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Ɛwɔ mfinimfini gyina hɔ

Fa ka .modal-dialog-centeredho na .modal-dialogfa vertically mfinimfini modal no.

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</div>

Nnwinnade ho nsɛm ne popovers

Wobetumi de nnwinnade ho nsɛm ne popovers ahyɛ modals mu sɛnea ɛho hia. Sɛ wɔto modals mu a, adwinnade ho nsɛm biara ne popovers a ɛwɔ mu no nso wɔpow no ara kwa.

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

Sɛ wode grid no di dwuma a

Fa Bootstrap grid nhyehyɛe no di dwuma wɔ modal bi mu denam nesting .container-fluidwɔ .modal-body. Afei, fa grid system classes a ɛyɛ daa no di dwuma sɛnea wobɛyɛ wɔ baabi foforo biara no.

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

So wowɔ button ahorow bi a ne nyinaa kanyan modal koro no ara a ɛsono emu nsɛm kakra? Fa event.relatedTargetne HTML data-*su ahorow (ebia ɛnam jQuery so ) di dwuma de sesa modal no mu nsɛm a egyina bɔtn a wɔakliki so.

Ase hɔ no yɛ live demo a nhwɛso HTML ne JavaScript di akyi. Sɛ wopɛ nsɛm pii a, kenkan modal events docs no ma nsɛm pii fa 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" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <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)
})

Sesa animation no

Nsakraeɛ $modal-fade-transformno kyerɛ nsakraeɛ tebea a ɛwɔ .modal-dialogansa na modal fade-in animation no aba, $modal-show-transformnsakraeɛ no kyerɛ nsakraeɛ a .modal-dialogɛwɔ modal fade-in animation no awieeɛ.

Sɛ wopɛ sɛ nhwɛso no zoom-in animation a, wubetumi ahyɛ $modal-fade-transform: scale(.8).

Yi animation no fi hɔ

Sɛ wopɛ modals a ɛda adi kɛkɛ sen sɛ ɛbɛyera akɔ mu ahwɛ a, yi .fadeadesua no fi wo modal markup no mu.

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

Nneɛma a ɛkorɔn a ɛyɛ nnam

Sɛ modal bi sorokɔ sesa bere a wɔabue a, ɛsɛ sɛ wofrɛ $('#myModal').modal('handleUpdate')no san siesie modal no gyinabea sɛ ebia scrollbar bi bɛpue a.

Nneɛma a wotumi nya

Hwɛ hu sɛ wode aria-labelledby="...", a ɛkyerɛ modal asɛmti no, bɛka .modal. Bio nso, wobɛtumi de wo modal dialog no ho nkyerɛkyerɛmu ama aria-describedbywɔ on .modal. Hyɛ no nsow sɛ enhia sɛ wode ka ho role="dialog"efisɛ yɛde ka ho dedaw denam JavaScript so.

YouTube video ahorow a wɔde hyɛ mu

YouTube video ahorow a wode bɛhyɛ modals mu no hwehwɛ JavaScript foforo a enni Bootstrap mu na ama woagyae playback no ankasa ne nea ɛkeka ho. Hwɛ Stack Overflow post a ɛboa yi ma nsɛm pii.

Nneɛma akɛse a wubetumi apaw

Modals wɔ akɛseɛ mmiɛnsa a wobɛpaw, a ɛwɔ hɔ denam modifier classes a wɔde bɛto a .modal-dialog. Saa akɛseɛ yi kick in wɔ breakpoints bi mu sɛdeɛ ɛbɛyɛ a wobɛkwati horizontal scrollbars wɔ viewports teateaa so.

Kɛseɛ	Klaase	Modal max-trɛw
Ketewa	`.modal-sm`	`300px`
Mfiaseɛ	Ɛnyɛ ebiara	`500px`
Kakraa	`.modal-lg`	`800px`
Nneɛma akɛse a ɛboro so	`.modal-xl`	`1140px`

Yɛn default modal a enni modifier adesuakuw no yɛ “mfinimfini” kɛse modal.

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

Sɛnea wɔde di dwuma

Modal plugin no dannan wo nsɛm a ahintaw no bere a wɔhwehwɛ no, ɛnam data su anaa JavaScript so. Ɛsan nso de ka .modal-opento <body>override default scrolling behavior no ho na ɛma a .modal-backdropto ma click area ma dismissing shown modals bere a clicking outside the modal.

Via data su ahorow so

Fa modal bi yɛ adwuma a wonkyerɛw JavaScript. Fa data-toggle="modal"si controller element bi so, te sɛ button, ne a data-target="#foo"anaasɛ href="#foo"sɛ wode besi modal pɔtee bi so sɛ wobɛdannan.

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

Ɛdenam JavaScript so

Frɛ modal a ɛwɔ id myModala ɛwɔ JavaScript line biako:

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

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-backdrop="".

Din	Korɔ	Mfiaseɛ	Nkyerɛmu
akyi mfonini	boolean anaasɛ ahama no`'static'`	nokorɛ	Nea ɛka ho ne modal-backdrop element bi. Sɛnea ɛbɛyɛ a, kyerɛ `static`ma akyigyina a ɛnto modal no mu wɔ klik so.
keyboard so nsɛm	boolean ho asɛm	nokorɛ	Ɛto modal no mu bere a wɔabɔ escape key no
baabi a ani si	boolean ho asɛm	nokorɛ	Fa adwene si modal no so bere a wɔahyɛ ase no.
da no adi	boolean ho asɛm	nokorɛ	Kyerɛ modal no bere a wɔahyɛ ase no.

Akwan a wɔfa so yɛ

Asynchronous akwan ne nsakrae ahorow

API akwan nyinaa yɛ asynchronous na ɛhyɛ nsakrae ase . Wɔsan kɔ nea ɔfrɛɛ no no nkyɛn bere a wɔafi nsakrae no ase ara pɛ nanso ansa na aba awiei . Bio nso, wobebu ani agu ɔkwan a wɔfa so frɛ ade bi a ɛresakra so no so .

Hwɛ yɛn JavaScript nkrataa no na woanya nsɛm pii .

`.modal(options)`

Ɛma wo nsɛm no yɛ adwuma sɛ modal. Gye akwan a wubetumi apaw bi tom object.

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

`.modal('toggle')`

Nsaano toggles a modal. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ modal no ankasa anaa wɔde asie (kyerɛ sɛ ansa na shown.bs.modalanaa hidden.bs.modaladeyɛ no aba).

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

`.modal('show')`

Nsaano bue modal bi. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔada modal no adi ankasa (kyerɛ sɛ ansa na shown.bs.modalasɛm no asi).

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

`.modal('hide')`

Nsaano de sie modal bi. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔde modal no asie ankasa (kyerɛ sɛ ansa na hidden.bs.modalasɛm no asi).

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

`.modal('handleUpdate')`

Fa nsa siesie modal no gyinabea sɛ modal bi sorokɔ sesa bere a wɔabue (kyerɛ sɛ sɛ ɛba sɛ scrollbar bi pue a).

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

`.modal('dispose')`

Ɔsɛe element bi modal.

Nsɛm a esisi

Bootstrap no modal adesuakuw no da nsɛm kakraa bi a esisii adi ma hooking kɔ modal dwumadi mu. Wɔtow modal nsɛm a esisi nyinaa wɔ modal no ankasa so (kyerɛ sɛ wɔ <div class="modal">).

Nsɛm a Ɛsisii no Su	Nkyerɛmu
kyerɛ.bs.modal	Saa adeyɛ yi tow ntɛm ara bere a `show`wɔfrɛ instance kwan no. Sɛ kliki na ɛde ba a, element a wɔakliki no wɔ hɔ sɛ `relatedTarget`adeyɛ no agyapade.
wɔakyerɛ.bs.modal	Wɔtow saa adeyɛ yi bere a wɔayɛ modal no ahu nea ɔde di dwuma no (bɛtwɛn ma CSS nsakrae ahorow no awie). Sɛ kliki na ɛde ba a, element a wɔakliki no wɔ hɔ sɛ `relatedTarget`adeyɛ no agyapade.
hide.bs.modal no ho nsɛm	Wɔtow saa adeyɛ yi ntɛm ara bere a `hide`wɔafrɛ instance kwan no.
ahintaw.bs.modal	Wɔtow saa adeyɛ yi bere a wɔawie modal no a wɔde asie afi ɔdefo no hɔ (bɛtwɛn ma CSS nsakrae ahorow no awie).
hideWɔasiw ano.bs.modal	Wɔtow saa adeyɛ yi bere a wɔakyerɛ modal no, ne akyi mfonini no yɛ `static`na wɔde klike a ɛwɔ modal no akyi anaasɛ guankɔbea safoa a wɔde mia no yɛ a wɔde keyboard option no anaasɛ `data-keyboard`wɔde ahyɛ `false`.

$('#myModal').on('hidden.bs.modal', function (event) {
  // do something...
})