Modal

Ampiasao ny plugin JavaScript modal Bootstrap mba hanampiana fifanakalozan-dresaka amin'ny tranokalanao ho an'ny boaty jiro, fampandrenesana mpampiasa, na atiny manokana.

Ahoana ny fiasan'izany

Alohan'ny hanombohan'ny singa modal an'ny Bootstrap dia aoka ho azo antoka ny mamaky izao manaraka izao satria niova vao haingana ny safidy sakafo.

Modals dia namboarina miaraka amin'ny HTML, CSS ary JavaScript. Apetraka eo ambonin'ny zavatra hafa rehetra ao amin'ny antontan-taratasy izy ireo ary esory ny horonan-taratasy <body>mba hihodina ny votoatiny modal.
Ny fanindriana ny "backdrop" modal dia hanidy ho azy ny modal.
Ny Bootstrap dia tsy manohana afa-tsy varavarankely modal iray isaky ny mandeha. Tsy tohanana ny modals nested satria inoanay fa traikefan'ny mpampiasa ratsy izy ireo.
Modely ampiasaina position: fixed, izay mety ho somary manokana momba ny fandikana azy. Raha azo atao dia apetraho amin'ny toerana ambony indrindra ny HTML modal anao mba hisorohana ny mety hisian'ny fitsabahana amin'ny singa hafa. Mety ho sendra olana ianao rehefa manao akany .modalao anatin'ny singa raikitra hafa.
Indray mandeha indray, noho ny position: fixed, misy fampitandremana sasany momba ny fampiasana modals amin'ny fitaovana finday. Jereo ny antontan-taratasy fanohanana ny navigateur raha mila antsipiriany.
Noho ny fomba famaritan'ny HTML5 ny semantikany, ny autofocustoetra HTML dia tsy misy fiantraikany amin'ny modals Bootstrap. Mba hahazoana vokatra mitovy amin'izany, ampiasao JavaScript manokana:

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

Miankina amin'ny prefers-reduced-motionfangatahan'ny haino aman-jery ny fiantraikan'ity singa ity. Jereo ny fizarana mihetsika mihena amin'ny antontan-taratasinay momba ny fahafahana miditra .

Tohizo ny famakiana ho an'ny demo sy torolalana fampiasana.

OHATRA

Ity ambany ity ny ohatra static mod (midika hoe azy positionary displayefa nosoloina). Ao anatin'izany ny lohatenin'ny modal, ny vatana modal (ilaina amin'ny padding), ary ny tongotra modaly (tsy voatery). Mangataka izahay mba hampidiranao lohapejy modèle miaraka amin'ny hetsika fandroahana raha azo atao, na manome hetsika fandroahana mazava hafa.

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

Ampifamadiho ny demo modal miasa amin'ny fipihana ny bokotra etsy ambany. Hivezivezy midina izy io ary hanjavona avy any an-tampon'ny pejy.

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

Lavitra static

Rehefa apetraka amin'ny static ny backdrop dia tsy hikatona ny modal rehefa manindry eo ivelany. Kitiho ny bokotra etsy ambany raha hanandrana azy.

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

Manorata votoaty lava

Rehefa lasa lava loatra ny modals ho an'ny seranan-tsambo na fitaovana ampiasain'ny mpampiasa, dia mihodina tsy miankina amin'ny pejy mihitsy izy ireo. Andramo ny demo eto ambany hahitana ny tiana holazaina.

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.

Azonao atao ihany koa ny mamorona modal scrollable izay mamela ny scrolling ny vatana modal amin'ny fanampiana .modal-dialog-scrollableny .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>

Mitsangana mitsangana

Ampio .modal-dialog-centeredeo .modal-dialogafovoany mitsangana ny modal.

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

Tooltips sy popovers

Ny toro-hevitra momba ny fitaovana sy ny popovers dia azo apetraka ao anaty modals raha ilaina. Rehefa mihidy ny modals dia esorina ho azy koa izay toro-lalana sy popover ao anatiny.

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

Mampiasa ny grid

Ampiasao ny rafitra grid Bootstrap ao anaty modal amin'ny alàlan'ny fanaingoana .container-fluidao anaty .modal-body. Avy eo, ampiasao ny kilasy rafitra rafitra ara-dalàna toy ny ataonao any amin'ny toerana hafa.

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

Manana bokotra maromaro izay miteraka mody mitovy amin'ny atiny hafa kely? Ampiasao event.relatedTargetsy HTML data-*toetra (mety ho amin'ny alalan'ny jQuery ) mba hanova ny votoatin'ny ny modal miankina amin'ny bokotra izay no kitihina.

Ity ambany ity ny demo mivantana arahin'ny ohatra HTML sy JavaScript. Raha mila fanazavana fanampiny dia vakio ny doka hetsika modal raha mila fanazavana momba ny 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)
})

Hanova ny animation

Ny $modal-fade-transformfari-piainana no mamaritra ny toetry ny fiovan'ny .modal-dialogalohan'ny sarimiaina fade-in modal, ny $modal-show-transformfari-piainana no mamaritra ny fiovan'ny .modal-dialogamin'ny faran'ny sarimiaina fade-in modal.

Raha tianao ohatra ny animation zoom-in dia azonao atao ny mametraka $modal-fade-transform: scale(.8).

Esory ny animation

Ho an'ny modals izay miseho fotsiny fa tsy manjavona ho jerena, esory ny .fadekilasy amin'ny marika modal anao.

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

Haavo mavitrika

Raha miova ny haavon'ny modal iray rehefa misokatra, dia tokony hiantso ianao $('#myModal').modal('handleUpdate')hanitsy ny toeran'ny modal raha sendra misy scrollbar.

Accessibility

Ataovy azo antoka ny manampy aria-labelledby="...", manondro ny lohatenin'ny modal, ny .modal. Ho fanampin'izany, azonao atao ny manome famaritana momba ny fifanakalozan-dresakao miaraka amin'ny aria-describedbyon .modal. Mariho fa tsy mila manampy ianao role="dialog"satria efa nampianay tamin'ny JavaScript.

Mampiditra horonan-tsary YouTube

Ny fametahana horonan-tsary YouTube amin'ny modals dia mitaky JavaScript fanampiny tsy ao amin'ny Bootstrap mba hampijanonana ho azy ny playback sy ny maro hafa. Jereo ity lahatsoratra Stack Overflow mahasoa ity raha mila fanazavana fanampiny.

Habe azo atao

Modals dia manana habe telo azo atao, azo alaina amin'ny alàlan'ny kilasy modifier hapetraka amin'ny .modal-dialog. Ireo habe ireo dia miditra amin'ny toerana fiatoana sasany mba hialana amin'ny scrollbar marindrano amin'ny seranana tery kokoa.

Size	KILASY	Modal max-width
KELY	`.modal-sm`	`300px`
toerana misy anao	tsy misy	`500px`
ankamaroan'ireo	`.modal-lg`	`800px`
Extra large	`.modal-xl`	`1140px`

Ny maodely mahazatra antsika tsy misy kilasy modifier dia ny "mode" habe.

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

Fampiasana

Ny plugin modal dia manova ny atiny miafina amin'ny fangatahana, amin'ny alàlan'ny toetran'ny data na JavaScript. Izy io koa dia manampy .modal-openamin'ny <body>fanafoanana ny fitondran-tena scrolling default ary miteraka a .modal-backdropmanome faritra kitiho hanesorana ireo modals aseho rehefa manindry ivelan'ny modal.

Amin'ny alàlan'ny data attributes

Ampidiro modal iray tsy manoratra JavaScript. Apetraho data-toggle="modal"eo amin'ny singa mpanara-maso, toy ny bokotra iray, miaraka amin'ny data-target="#foo"na href="#foo"hikendry mody iray manokana hivezivezy.

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

Amin'ny JavaScript

Miantso modal miaraka amin'ny id myModalmisy andalana tokana amin'ny JavaScript:

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

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-backdrop="".

Anarana	Type	toerana misy anao	Description
resahana	boolean na ny tady`'static'`	marina	Ahitana singa modal-backdrop. Raha tsy izany, manendry `static`ny backdrop izay tsy manidy ny modal amin'ny tsindry.
Ohatra	boolean	marina	Manakatona ny modal rehefa tsindriana ny fanalahidin'ny escape
ifantohana	boolean	marina	Mametraka ny fifantohana amin'ny modal rehefa natomboka.
FAMPISEHOANA	boolean	marina	Mampiseho ny modal rehefa natomboka.

fomba

Fomba sy fifindrana asynchronous

Ny fomba API rehetra dia asynchronous ary manomboka tetezamita . Miverina any amin'ny mpiantso izy ireo raha vao manomboka ny tetezamita fa alohan'ny hifarana . Ho fanampin'izany, tsy hojerena ny fiantsoana fomba iray amin'ny singa tetezamita .

Jereo ny antontan-taratasintsika JavaScript raha mila fanazavana fanampiny .

`.modal(options)`

Mampihetsika ny atiny ho toy ny modal. Manaiky safidy azo atao object.

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

`.modal('toggle')`

Manova fomba tanana iray. Miverina any amin'ny mpiantso alohan'ny naseho na nafenina ny modal (izany hoe alohan'ny nitrangan'ny shown.bs.modalna hidden.bs.modalhetsika).

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

`.modal('show')`

Manokatra modal amin'ny tanana. Miverina any amin'ny mpiantso alohan'ny tena naseho ny modal (izany hoe alohan'ny shown.bs.modalnitrangan'ny hetsika).

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

`.modal('hide')`

Manafina modal iray amin'ny tanana. Miverina any amin'ny mpiantso alohan'ny tena nafenina ny modal (izany hoe alohan'ny hidden.bs.modalnitrangan'ny hetsika).

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

`.modal('handleUpdate')`

Ampifanaraho amin'ny tanana ny toeran'ny modal raha miova ny haavon'ny modal iray rehefa misokatra (izany hoe raha misy scrollbar miseho).

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

`.modal('dispose')`

Manimba ny modalin'ny singa iray.

zava-mitranga

Ny kilasy modal an'ny Bootstrap dia mampiharihary hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fiasa modal. Ny hetsika modal rehetra dia alefa amin'ny modal mihitsy (izany hoe ao amin'ny <div class="modal">).

Karazana hetsika	Description
show.bs.modal	Mirehitra avy hatrany ity hetsika ity rehefa `show`antsoina ny fomba fiasa. Raha vokatry ny tsindry iray dia azo alaina ho `relatedTarget`fananan'ny hetsika ny singa voakitika.
shown.bs.modal	Ity hetsika ity dia voaroaka rehefa natao ho hitan'ny mpampiasa ny modal (hiandry ny fifindran'ny CSS ho vita). Raha vokatry ny tsindry iray dia azo alaina ho `relatedTarget`fananan'ny hetsika ny singa voakitika.
hide.bs.modal	Ity hetsika ity dia alefa avy hatrany rehefa `hide`nantsoina ny fomba fiasa.
hidden.bs.modal	Voaroaka ity hetsika ity rehefa vita ny nafenina tamin'ny mpampiasa ny modal (hiandry ny famitana ny fifindrana CSS).
hidePrevented.bs.modal	Ity hetsika ity dia alefa rehefa aseho ny modal, ny lamosiny dia `static`ary ny kitiho ivelan'ny modal na ny fanerena fanendry fanendry dia atao miaraka amin'ny safidy fitendry na `data-keyboard`apetraka amin'ny `false`.

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