in English

Modal

Jiri ngwa mgbakwunye JavaScript nke Bootstrap ka ịgbakwunye mkparịta ụka na saịtị gị maka igbe ọkụ, ọkwa onye ọrụ, ma ọ bụ ọdịnaya omenala kpamkpam.

Ka o si arụ ọrụ

Tupu ịmalite na akụrụngwa modal Bootstrap, jide n'aka na ị gụọ ihe ndị a ka nhọrọ nhọrọ anyị agbanweela n'oge na-adịbeghị anya.

Ejiri HTML, CSS, na JavaScript wuo usoro. A na-edowe ha n'ọkwa karịa ihe ọ bụla ọzọ dị na akwụkwọ ahụ wee wepụ akwụkwọ mpịakọta na <body>ya ka ọdịnaya modal wee pịgharịa kama.
Ịpị na modal "backdrop" ga-emechi modal ozugbo.
Bootstrap na-akwado naanị otu windo modal n'otu oge. Anaghị akwado ụdị akwụghị ụgwọ dịka anyị kwenyere na ha abụghị ahụmihe onye ọrụ adịghị mma.
Modals na-eji position: fixed, nke nwere ike mgbe ụfọdụ bụrụ ntakịrị ihe gbasara nsụgharị ya. Mgbe ọ bụla enwere ike, tinye HTML modal gị n'ọkwa dị elu ka ịzenarị ndabichi sitere na ihe ndị ọzọ. O yikarịrị ka ị ga-enwe nsogbu mgbe ị na-etinye ọnụ .modaln'ime ihe ọzọ edoziri.
Ọzọkwa, n'ihi position: fixed, e nwere ụfọdụ caveats na iji modals na mobile ngwaọrụ. Hụ docs nkwado ihe nchọgharị anyị maka nkọwa.
N'ihi ka HTML5 si akọwa semantics ya, àgwà autofocusHTML enweghị mmetụta na Bootstrap modals. Iji nweta otu mmetụta ahụ, jiri ụfọdụ Javascript omenala:

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

Mmetụta animation nke akụrụngwa a dabere na prefers-reduced-motionajụjụ mgbasa ozi. Hụ akụkụ ngagharị ewelatala nke akwụkwọ nnweta anyị .

Nọgide na-agụ maka ngosi ngosi na ntuziaka ojiji.

Ihe atụ

N'okpuru ebe a bụ ihe atụ modal staticposition (pụtara ya na displaya gafeworo ya). Agụnyere bụ modal nkụnye eji isi mee, modal body (chọrọ maka padding), na modal footer (nhọrọ). Anyị na-arịọ gị ka ịtinye ndị nkụnye eji isi mee ihe na omume ịchụpụ mgbe ọ bụla enwere ike, ma ọ bụ wepụta mmemme ịchụpụ ọzọ doro anya.

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

Ihe ngosi dị ndụ

Gbanwee ngosi ngosi na-arụ ọrụ site na ịpị bọtịnụ dị n'okpuru. Ọ ga-adaba ma daa site n'elu ibe ahụ.

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

Ebe static

Mgbe atọrọ backdrop ka ọ kwụ ọtọ, modal agaghị emechi mgbe ịpị na mpụga ya. Pịa bọtịnụ dị n'okpuru ka ịnwale ya.

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

Na-atụgharị ọdịnaya ogologo

Mgbe modals toro ogologo maka nlele ma ọ bụ ngwaọrụ onye ọrụ, ha na-atụgharị na ibe ahụ n'onwe ya. Gbalịa ngosi n'okpuru ka ịhụ ihe anyị na-ekwu.

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.

Ị nwekwara ike ịmepụta modal mpịakọta nke na-enye ohere ịpịgharịa modal ahụ site na ịgbakwunye .modal-dialog-scrollablena .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>

gbadoro ụkwụ na kwụ ọtọ

Tinye .modal-dialog-centeredna .modal-dialogn'etiti modal kwụ ọtọ.

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

Ntuziaka ngwaọrụ na popovers

Enwere ike itinye ndụmọdụ na popovers n'ime modal dị ka achọrọ. Mgbe emechiri modal, ndụmọdụ ngwaọrụ ọ bụla na popovers dị n'ime na-ewepụkwa ozugbo.

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

Iji grid

Jiri usoro grid Bootstrap n'ime modal site na itinye akwụ .container-fluidn'ime .modal-body. Mgbe ahụ, jiri klaasị sistemụ grid nkịtị ka ị ga-eme ebe ọ bụla ọzọ.

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

Nwere ụyọkọ bọtịnụ niile na-ebute otu modal nwere ọdịnaya dịtụ iche? Jiri event.relatedTargetna njirimara HTMLdata-* (ikekwe site na jQuery ) iji gbanwee ọdịnaya nke modal dabere na bọtịnụ a pịrị.

N'okpuru ebe a bụ ngosi dị ndụ nke HTML na Javascript na-esote. Maka ozi ndị ọzọ, gụọ ihe omume modal docs maka nkọwa na 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)
})

Gbanwee animation

Ndị na $modal-fade-transform-agbanwe agbanwe na-ekpebi ọnọdụ mgbanwe nke .modal-dialogtupu modal fade-na animation, $modal-show-transformmgbanwe na-ekpebi mgbanwe nke .modal-dialogna njedebe nke modal fade-na animation.

Ọ bụrụ na ịchọrọ ọmụmaatụ ihe ngosi mbugharị, ị nwere ike ịtọ $modal-fade-transform: scale(.8).

Wepu ihe nkiri

Maka ụdịdị ndị na-apụta karịa ka ị ga-adaba ka ilele, wepụ .fadeklaasị na akara modal gị.

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

Ogologo dị ike

Ọ bụrụ na ịdị elu nke modal na-agbanwe mgbe ọ na-emeghe, ị ga-akpọ $('#myModal').modal('handleUpdate')maka ịhazigharị ọnọdụ modal ahụ ma ọ bụrụ na akwụkwọ mpịakọta pụtara.

Nnweta

Jide n'aka na ịtinye aria-labelledby="...", na-ezo aka na aha modal, na .modal. Na mgbakwunye, ịnwere ike ịnye nkọwa nke mkparịta ụka modal gị na aria-describedbyna .modal. Mara na ịchọghị ịgbakwunye role="dialog"ebe ọ bụ na anyị tinyegoro ya site na Javascript.

Na-etinye vidiyo YouTube

Ịtinye vidiyo YouTube na ụdịdị chọrọ Javascript agbakwunyere ọ bụghị na Bootstrap ka ọ kwụsị ịkpọghachi na-akpaghị aka na ihe ndị ọzọ. Hụ akwụkwọ ozi Stack Overflow a na-enyere aka maka ozi ndị ọzọ.

Nha nhọrọ

Modal nwere nha nhọrọ atọ, dị site na klaasị modifier ka etinye ya na .modal-dialog. Nha ndị a na-abanye n'ebe nkwụsịtụ ụfọdụ ka ịzenarị akwụkwọ mpịakọta kwụ ọtọ n'ọdụ ụgbọ mmiri dị warara.

Nha	Klas	Modal max-obosara
Obere	`.modal-sm`	`300px`
Ọdabara	Ọ dịghị	`500px`
Nnukwu	`.modal-lg`	`800px`
Nnukwu ibu	`.modal-xl`	`1140px`

Modal ndabara anyị na-enweghị klas modifier bụ modal nha “ọkara”.

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

Ojiji

Ngwa mgbakwunye modal na-agbanwe ọdịnaya gị zoro ezo na ọchịchọ, site na njirimara data ma ọ bụ Javascript. Ọ na-agbakwụnye .modal-openna <body>ịkagbu omume mpịakọta ndabara ma na-ebute a .modal-backdropiji nye mpaghara ọpịpị maka ịchụpụ modals egosiri mgbe ịpị na mpụga modal.

Site na njirimara data

Mee modal rụọ ọrụ na-edeghị Javascript. Tọọ data-toggle="modal"na ihe njikwa, dị ka bọtịnụ, yana otu data-target="#foo"ma ọ bụ href="#foo"iji lekwasịrị anya otu modal ka ị gbanwee.

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

Site JavaScript

Kpọọ modal nwere id myModalnwere otu ahịrị Javascript:

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

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-backdrop="".

Aha	Ụdị	Ọdabara	Nkọwa
ndabere	boolean ma ọ bụ eriri`'static'`	eziokwu	Na-agụnye ihe modal-backdrop element. Nhọrọ, ezipụta `static`maka backdrop nke na-adịghị emechi modal na pịa.
ahụigodo	boolean	eziokwu	Na-emechi modal mgbe ịpịrị igodo mgbapụ
lekwasị anya	boolean	eziokwu	Na-etinye uche na modal mgbe ebido ya.
gosi	boolean	eziokwu	Na-egosi modal mgbe ebido ya.

Ụzọ

Ụzọ asynchronous na ntụgharị

Ụzọ API niile enweghị atụ wee malite mgbanwe . Ha na-alaghachikwuru onye na-akpọ oku ozugbo mgbanwe ahụ malitere mana tupu ya akwụsị . Na mgbakwunye, a ga-eleghara oku usoro na mpaghara mgbanwe anya .

Hụ akwụkwọ Javascript anyị maka ozi ndị ọzọ .

`.modal(options)`

Na-eme ka ọdịnaya gị rụọ ọrụ dị ka modal. Nabata nhọrọ nhọrọ object.

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

`.modal('toggle')`

Iji aka na-atụgharị modal. Na-alaghachikwute onye na-akpọ oku tupu egosiri modal ma ọ bụ zoo (ya bụ tupu ihe omume shown.bs.modalma ọ bụ hidden.bs.modalihe emee).

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

`.modal('show')`

Iji aka na-emepe modal. Na-alaghachikwute onye na-akpọ oku tupu egosiri modal n'ezie (ya bụ tupu shown.bs.modalmmemme emee).

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

`.modal('hide')`

Iji aka na-ezobe modal. Na-alaghachikwute onye na-akpọ oku tupu ezobe modal ahụ (ya bụ tupu hidden.bs.modalmmemme emee).

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

`.modal('handleUpdate')`

Jiri aka dozie ọnọdụ modal ma ọ bụrụ na ịdị elu nke modal na-agbanwe mgbe ọ na-emeghe (ya bụ ma ọ bụrụ na akwụkwọ mpịakọta pụtara).

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

`.modal('dispose')`

Na-emebi ụkpụrụ mmewere.

Ihe omume

Klas modal Bootstrap na-ekpughe ihe omume ole na ole maka ịbanye n'ime ọrụ modal. A na-achụpụ ihe omume modal na modal n'onwe ya (ya bụ na <div class="modal">).

Ụdị mmemme	Nkọwa
gosi.bs.modal	Ihe omume a na-agba ọkụ ozugbo `show`a na-akpọ usoro ihe atụ. Ọ bụrụ na ọpịpị kpatara ya, ihe pịrị apị dị ka `relatedTarget`ihe nke mmemme ahụ.
egosiri.bs.modal	A na-achụpụ ihe omume a mgbe onye ọrụ mere ka modal ahụ anya (ga-echere mgbanwe CSS ka ọ gwụchaa). Ọ bụrụ na ọpịpị kpatara ya, ihe pịrị apị dị ka `relatedTarget`ihe nke mmemme ahụ.
zoo.bs.modal	A na-agbapụ ihe omume a ozugbo `hide`a kpọrọ usoro ihe atụ.
zoro ezo.bs.modal	A na-achụpụ ihe omume a mgbe ezoro ezoro ya n'aka onye ọrụ modal (ga-echere mgbanwe CSS ka agwụchaa).
zooPrevented.bs.modal	A na-agbapụ mmemme a mgbe egosiri modal ahụ, ndabere ya bụ `static`na pịa na mpụga modal ma ọ bụ pịa igodo mgbapụ na-eji nhọrọ ahụigodo ma ọ bụ `data-keyboard`tọọ na `false`.

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