in English

Modali

Uża l-plugin modali JavaScript ta' Bootstrap biex iżżid djalogu mas-sit tiegħek għal lightboxes, notifiki tal-utent, jew kontenut kompletament personalizzat.

Kif taħdem

Qabel ma tibda bil-komponent modali ta 'Bootstrap, kun żgur li taqra dan li ġej peress li l-għażliet tal-menu tagħna inbidlu reċentement.

Modali huma mibnija bl-HTML, CSS, u JavaScript. Qed jitqiegħdu fuq kull ħaġa oħra fid-dokument u neħħi l-iscroll minn <body>hekk li l-kontenut modali jiskrollja minflok.
Meta tikklikkja fuq l-"isfond" modali se tagħlaq awtomatikament il-modal.
Bootstrap jappoġġja biss tieqa modali waħda kull darba. Il-modali mgħaqqda mhumiex appoġġjati peress li nemmnu li huma esperjenzi fqar tal-utent.
Il-modali jużaw position: fixed, li kultant jista 'jkun daqsxejn partikolari dwar ir-rendiment tiegħu. Kull meta jkun possibbli, poġġi l-HTML modali tiegħek f'pożizzjoni tal-ogħla livell biex tevita interferenza potenzjali minn elementi oħra. X'aktarx ikollok problemi meta tbejtu fi .modalħdan element fiss ieħor.
Għal darb'oħra, minħabba position: fixed, hemm xi twissijiet bl-użu ta 'modals fuq apparat mobbli. Ara d-dokumenti tal-appoġġ tal-browser tagħna għad-dettalji.
Minħabba kif HTML5 jiddefinixxi s-semantika tiegħu, l- autofocusattribut HTML m'għandu l-ebda effett fil-modali Bootstrap. Biex tikseb l-istess effett, uża xi JavaScript personalizzat:

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

L-effett ta 'animazzjoni ta' dan il-komponent jiddependi fuq il prefers-reduced-motion-mistoqsija tal-midja. Ara t- taqsima tal-mozzjoni mnaqqsa tad-dokumentazzjoni tagħna dwar l-aċċessibbiltà .

Kompli aqra għal demos u linji gwida dwar l-użu.

Eżempji

Hawn taħt hemm eżempju modali statikuposition (li jfisser tiegħu u displayġew sostitwiti). Inklużi huma l-header modali, il-korp modali (meħtieġa għal padding), u l-footer modali (mhux obbligatorju). Nitolbu li tinkludi headers modali b'azzjonijiet ta' ċaħda kull meta jkun possibbli, jew tipprovdi azzjoni ta' ċaħda espliċita oħra.

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

Aqleb demo modali li taħdem billi tikklikkja l-buttuna hawn taħt. Jiżżerżaq 'l isfel u jisparixxi mill-parti ta' fuq tal-paġna.

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

Sfond statiku

Meta l-isfond ikun issettjat għal statiku, il-modal ma jagħlaqx meta tikklikkja barra minnha. Ikklikkja l-buttuna hawn taħt biex tipprovaha.

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

Scrolling kontenut twil

Meta l-modals isiru twal wisq għall-viewport jew l-apparat tal-utent, jiskrollaw indipendentement mill-paġna nnifisha. Ipprova d-demo hawn taħt biex tara xi ngħidu.

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.

Tista 'wkoll toħloq modal li tista' tiskrollja li tippermetti tiskrollja l-korp modali billi żżid .modal-dialog-scrollablema ' .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>

Iċċentrat vertikalment

Żid .modal-dialog-centeredmal .modal-dialogbiex iċċentra vertikalment il-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 u popovers

Tooltips u popovers jistgħu jitqiegħdu fi ħdan modali kif meħtieġ. Meta l-modals jingħalqu, kwalunkwe tooltips u popovers ġewwa huma wkoll awtomatikament miċħuda.

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

Bl-użu tal-grilja

Uża s-sistema tal-grilja Bootstrap fi ħdan modali billi tbejtu .container-fluidfi ħdan il- .modal-body. Imbagħad, uża l-klassijiet normali tas-sistema tal-grilja kif tagħmel imkien ieħor.

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

Għandek mazz ta 'buttuni li kollha jqanqlu l-istess modal b'kontenut kemmxejn differenti? Uża event.relatedTargetu attributi HTMLdata-* (possibilment permezz ta' jQuery ) biex tvarja l-kontenut tal-modal skont liema buttuna ġiet ikklikkjata.

Hawn taħt hawn demo live segwita b'eżempju HTML u JavaScript. Għal aktar informazzjoni, aqra d-dokumenti tal-avvenimenti modali għad-dettalji fuq 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)
})

Ibdel l-animazzjoni

Il- $modal-fade-transformvarjabbli tiddetermina l-istat tat-trasformazzjoni ta' .modal-dialogqabel l-animazzjoni ta' fade-in modali, il- $modal-show-transformvarjabbli tiddetermina t-trasformazzjoni ta' .modal-dialogfl-aħħar tal-animazzjoni ta' fade-in modali.

Jekk trid pereżempju animazzjoni zoom-in, tista 'tissettja $modal-fade-transform: scale(.8).

Neħħi l-animazzjoni

Għal modals li sempliċiment jidhru aktar milli fade biex tarahom, neħħi l- .fadeklassi mill-markup modali tiegħek.

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

Għoli dinamiċi

Jekk l-għoli ta' modal jinbidel waqt li jkun miftuħ, għandek ċċempel $('#myModal').modal('handleUpdate')biex taġġusta mill-ġdid il-pożizzjoni tal-modal f'każ li tidher scrollbar.

Aċċessibilità

Kun żgur li żżid aria-labelledby="...", b'referenza għat-titlu modali, għal .modal. Barra minn hekk, tista' tagħti deskrizzjoni tad-djalogu modali tiegħek aria-describedbyb'on .modal. Innota li m'għandekx bżonn iżżid role="dialog"peress li aħna diġà nżiduha permezz ta' JavaScript.

Inkorporazzjoni ta 'vidjows ta' YouTube

L-inkorporazzjoni ta' vidjows ta' YouTube f'modals teħtieġ JavaScript addizzjonali mhux f'Bootstrap biex twaqqaf awtomatikament id-daqq u aktar. Ara din il-post utli ta' Stack Overflow għal aktar informazzjoni.

Daqsijiet fakultattivi

Il-modali għandhom tliet daqsijiet fakultattivi, disponibbli permezz ta' klassijiet ta' modifikaturi biex jitqiegħdu fuq .modal-dialog. Dawn id-daqsijiet jibdew f'ċerti breakpoints biex jevitaw scrollbars orizzontali fuq viewports idjaq.

Daqs	Klassi	Modali max-wisa '
Żgħir	`.modal-sm`	`300px`
Default	Xejn	`500px`
Kbir	`.modal-lg`	`800px`
Kbir żejjed	`.modal-xl`	`1140px`

Il-modal default tagħna mingħajr il-klassi tal-modifikatur jikkostitwixxi l-modal ta' daqs "medju".

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

Użu

Il-plugin modali jibdel il-kontenut moħbi tiegħek fuq talba, permezz ta' attributi tad-dejta jew JavaScript. Iżżid ukoll .modal-openmal- <body>imġieba ta' scrolling predefinita biex tissostitwixxi u tiġġenera .modal-backdropbiex tipprovdi żona tal-ikklikkja biex tiċħad il-modali murija meta tikklikkja barra l-modal.

Via attributi tad-data

Attiva modali mingħajr ma tikteb JavaScript. Issettja data-toggle="modal"fuq element ta 'kontrollur, bħal buttuna, flimkien ma' data-target="#foo"jew href="#foo"biex timmira modal speċifiku biex toggle.

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

Via JavaScript

Sejħa modal b'id myModalb'linja waħda ta' JavaScript:

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

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-backdrop="".

Isem	Tip	Default	Deskrizzjoni
sfond	boolean jew is-sekwenza`'static'`	veru	Jinkludi element ta' sfond modali. Inkella, speċifika `static`għal sfond li ma jagħlaqx il-modal mal-ikklikkja.
tastiera	boolean	veru	Jagħlaq il-modal meta tingħafas iċ-ċavetta tal-ħarba
tiffoka	boolean	veru	Tpoġġi l-enfasi fuq il-modal meta tkun inizjalizzata.
juru	boolean	veru	Juri l-modal meta inizjalizzat.

Metodi

Metodi asinkroniċi u tranżizzjonijiet

Il-metodi kollha tal-API huma asinkroniċi u jibdew transizzjoni . Jirritornaw għand min iċempel hekk kif tinbeda t-tranżizzjoni iżda qabel ma tispiċċa . Barra minn hekk, sejħa ta' metodu fuq komponent ta' tranżizzjoni se tiġi injorata .

Ara d-dokumentazzjoni JavaScript tagħna għal aktar informazzjoni .

`.modal(options)`

Jattiva l-kontenut tiegħek bħala modal. Jaċċetta għażliet fakultattivi object.

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

`.modal('toggle')`

Manwalment toggles modali. Jirritorna lil min iċempel qabel ma l-modal ikun fil-fatt intwera jew moħbi (jiġifieri qabel ma jseħħ l-avveniment shown.bs.modaljew ).hidden.bs.modal

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

`.modal('show')`

Manwalment tiftaħ modali. Jirritorna lil min iċempel qabel ma l-modal ikun fil-fatt intwera (jiġifieri qabel ma shown.bs.modaljseħħ l-avveniment).

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

`.modal('hide')`

Manwalment jaħbi modali. Jirritorna lil min iċempel qabel ma l-modal fil-fatt ġie moħbi (jiġifieri qabel ma hidden.bs.modaljseħħ l-avveniment).

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

`.modal('handleUpdate')`

Aġġusta mill-ġdid manwalment il-pożizzjoni tal-modal jekk l-għoli ta' modal jinbidel waqt li jkun miftuħ (jiġifieri f'każ li tidher scrollbar).

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

`.modal('dispose')`

Jeqred il-modal ta' element.

Avvenimenti

Il-klassi modali ta 'Bootstrap tesponi ftit avvenimenti biex tgħaqqad il-funzjonalità modali. L-avvenimenti modali kollha jiġu sparati lejn il-modal innifsu (jiġifieri fil- <div class="modal">).

Tip ta' Avveniment	Deskrizzjoni
juru.bs.modal	Dan l-avveniment jispara immedjatament meta `show`jissejjaħ il-metodu tal-istanza. Jekk ikkawżat minn klikk, l-element ikklikkjat huwa disponibbli bħala l- `relatedTarget`proprjetà tal-avveniment.
muri.bs.modal	Dan l-avveniment jiġi sparat meta l-modal ikun sar viżibbli għall-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew). Jekk ikkawżat minn klikk, l-element ikklikkjat huwa disponibbli bħala l- `relatedTarget`proprjetà tal-avveniment.
hide.bs.modal	Dan l-avveniment jiġi sparat immedjatament meta l- `hide`metodu tal-istanza jkun ġie msejjaħ.
moħbija.bs.modali	Dan l-avveniment jiġi sparat meta l-modal ikun spiċċa moħbi mill-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew).
hidePrevented.bs.modal	Dan l-avveniment jiġi sparat meta jintwera l-modal, l-isfond tiegħu huwa `static`u ssir ikklikkja barra l-modal jew agħfas ta 'ċavetta ta' escape bl-għażla tat-tastiera jew `data-keyboard`issettjata għal `false`.

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