Source

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

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

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.

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

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

Iċċentrat vertikalment

Żid .modal-dialog-centeredmal .modal-dialogbiex iċċentra vertikalment il-modal.

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

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>

Kontenut modali li jvarja

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

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" role="dialog" 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 role="dialog"u aria-labelledby="...", b'referenza għat-titlu modali, għal .modal, u role="document"għall- .modal-dialoginnfisha. Barra minn hekk, tista' tagħti deskrizzjoni tad-djalogu modali tiegħek aria-describedbyb'on .modal.

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

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

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 staticgħal sfond li ma jagħlaqx il-modal meta tikklikkja jew fuq l-istampa taċ-ċavetta tal-ħarba.
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 showjissejjaħ il-metodu tal-istanza. Jekk ikkawżat minn klikk, l-element ikklikkjat huwa disponibbli bħala l- relatedTargetproprjetà 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- relatedTargetproprjetà tal-avveniment.
hide.bs.modal Dan l-avveniment jiġi sparat immedjatament meta l- hidemetodu 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 jkun staticu ssir ikklikkja barra l-modal jew agħfas ta 'ċavetta ta' ħarba. 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})