Source

Modal

Çyra gutulary, ulanyjy habarnamalary ýa-da düýbünden ýörite mazmun üçin sahypaňyza gepleşikler goşmak üçin Bootstrap-yň JavaScript modal pluginini ulanyň.

Bu nähili işleýär

“Bootstrap” -yň modal komponenti bilen başlamazdan ozal menýu opsiýalarymyzyň üýtgemegi sebäpli aşakdakylary okaň.

  • Modallar HTML, CSS we JavaScript bilen gurulýar. <body>Olar resminamadaky beýleki zatlaryň üstünde ýerleşýärler we modal mazmunyň ýerine aýlanmagy üçin aýlawy aýyrýarlar .
  • Modal “fonda” basylsa, modal awtomatiki usulda ýapylar.
  • Bootstrap bir gezekde diňe bir modal penjiräni goldaýar. Içerki modallar goldanylmaýar, sebäbi ulanyjylaryň pes tejribelerine ynanýarys.
  • Modallar ulanylýar position: fixed, käwagt onuň görkezilişi barada birneme aýratyn bolup biler. Mümkin boldugyça, beýleki elementleriň bolup biljek päsgelçiliklerinden gaça durmak üçin modal HTML-ni iň ýokary derejä goýuň. .modalBaşga bir kesgitli elementiň içinde höwürtge döredeniňizde kynçylyklara duçar bolarsyňyz .
  • Mobileene-de bir gezek, position: fixedykjam enjamlarda modal ulanýan käbir gowaklar bar. Jikme-jiklikler üçin brauzer goldaw resminamalarymyza serediň.
  • HTML5 semantikasyny nädip kesgitleýändigi sebäpli, HTML autofocusatributynyň Bootstrap modallarynda täsiri ýok. Şol bir effekt gazanmak üçin käbir JavaScript ulanyň:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Bu komponentiň animasiýa täsiri prefers-reduced-motionmedia talaplaryna baglydyr. Elýeterlilik resminamalarymyzyň azaldylan hereket bölümine serediň .

Görkezişler we ulanyş görkezmeleri üçin okaň.

Mysallar

Aşakda statiki modal mysal (onuň manysyny aňladýar positionwe displayýokaşdy). Modal sözbaşy, modal korpus (zerur padding) we modal aşaky sözbaşy (islege görä) girýär. Mümkin boldugyça işden aýyrmak hereketleri bilen modal sözbaşylary goşmagyňyzy ýa-da başga bir aç-açan işden aýyrmagyňyzy haýyş edýäris.

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

Göni görkeziş

Aşakdaky düwmä basyp, işleýän modal demony üýtgediň. Aşakdan süýşer we sahypanyň ýokarsyndan pese gaçar.

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

Uzyn mazmuny aýlamak

Modallar ulanyjynyň görnüşi ýa-da enjamy üçin gaty uzyn bolanda, sahypanyň özünden garaşsyz aýlanýar. Näme diýjek bolýanymyzy görmek üçin aşakdaky demony synap görüň.

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

.modal-dialog-scrollableŞeýle hem, modal göwrümi goşmak arkaly aýlamaga mümkinçilik berýän aýlanyp bolýan modal döredip bilersiňiz .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>

Dik merkezde

Modaly dikligine merkezleşdirmek üçin .modal-dialog-centeredgoşuň ..modal-dialog

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

Gurallar we popovers

Gurallar we popovers zerur bolanda modallaryň içinde ýerleşdirilip bilner. Modallar ýapylanda, içindäki islendik gurallar we açyjylar awtomatiki usulda işden çykarylýar.

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

Paneli ulanmak

Içinde höwürtge döredip, “Bootstrap” grid ulgamyny modalyň içinde .container-fluidulanyň .modal-body. Soň bolsa, beýleki ýerlerde bolşy ýaly adaty set ulgamy sapaklaryny ulanyň.

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

Dürli modal mazmun

Birneme üýtgeşik mazmunly birmeňzeş modaly herekete getirýän bir topar düwmeler barmy? Modalyň mazmunyny haýsy düwmä basylandygyna görä üýtgetmek üçin event.relatedTargetHTML atributlaryny data-*( ähtimal jQuery arkaly ) ulanyň .

Aşakda HTML we JavaScript mysallary bilen göni ýaýlymda görkezilýär. Has giňişleýin maglumat üçin jikme-jiklikler üçin modal wakalaryň resminamalaryny okaň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)
})

Animasiýany üýtgediň

$modal-fade-transformÜýtgeýji, modal ýitip barýan animasiýadan ozal üýtgeýän ýagdaýy kesgitleýär, üýtgeýji .modal-dialogmodal öçürilen animasiýanyň soňundaky $modal-show-transformüýtgemäni kesgitleýär ..modal-dialog

Mysal üçin ulaltmak animasiýasyny isleseňiz, sazlap bilersiňiz $modal-fade-transform: scale(.8).

Animasiýany aýyryň

Görmek üçin ýitip gitmän, ýönekeý görünýän modallar üçin .fadesynpy modal belligiňizden aýyryň.

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

Dinamiki belentlikler

Modalyň beýikligi açyk wagty üýtgese, $('#myModal').modal('handleUpdate')aýlaw paneli peýda bolan ýagdaýynda modalyň ýagdaýyny sazlamak üçin jaň etmeli.

Elýeterlilik

Modal adyna, özüne role="dialog"we özüne goşuň . Mundan başga-da, modal gepleşikleriňiziň düşündirişini berip bilersiňiz .aria-labelledby="...".modalrole="document".modal-dialogaria-describedby.modal

YouTube wideolaryny ýerleşdirmek

YouTube wideolaryny modallara ornaşdyrmak, Bootstrap-da däl, goşmaça JavaScript-i oýnamagy we başga-da köp zady talap edýär. Has giňişleýin maglumat üçin bu peýdaly “Stack overflow” ýazgysyna serediň .

Meýletin ululyklar

Modallarda üç sany goşmaça ululyk bar, a-da goýuljak üýtgediji synplar arkaly .modal-dialog. Bu ululyklar dar görnüşdäki gorizontal aýlaw panellerinden gaça durmak üçin belli bir nokatlara girýär.

Ölçegi Synp Modal maksimum giňlik
Kiçi .modal-sm 300px
Bellenen Hiç 500px
Uly .modal-lg 800px
Goşmaça uly .modal-xl 1140px

Üýtgediji synpsyz deslapky modalymyz “orta” ululyk modalyny düzýär.

<!-- 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">
    <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">
    <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">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Ulanylyşy

Modal plugin, gizlin mazmunyňyzy maglumat atributlary ýa-da JavaScript arkaly islege görä üýtgedýär. Şeýle hem , deslapky aýlanyş häsiýetini ýok etmek .modal-openüçin goşant goşýar we modalyň daşyna basanyňyzda görkezilen modallary <body>ýatyrmak üçin basmak meýdançasyny döredýär..modal-backdrop

Maglumat atributlary arkaly

JavaScript ýazman modaly işjeňleşdiriň. Dolandyryjy data-toggle="modal"elementi, düwme ýaly, data-target="#foo"ýa-da href="#foo"üýtgetmek üçin belli bir modaly nyşana alyň.

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

JavaScript arkaly

myModalJavaScript-iň bir setiri bolan idli modala jaň ediň :

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

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-backdrop="".

Ady Görnüşi Bellenen Düşündiriş
fon bulean ýa-da setir'static' dogry Modal-fon elementini öz içine alýar. staticAtivea- da bolmasa, basylanda modaly ýapmaýan fon üçin kesgitläň .
klawiatura boolean dogry Gaçmak düwmesi basylanda modaly ýapýar
fokus boolean dogry Başlanylanda ünsi modala gönükdirýär.
görkezmek boolean dogry Başlanylanda modaly görkezýär.

Usullar

Asynkron usullar we geçişler

APIhli API usullary asynkron bolup, geçişe başlaýar . Geçiş başlan badyna, ýöne gutarmanka jaň edijä gaýdyp gelýärler . Mundan başga-da, geçiş komponentine çagyryş usuly hasaba alynmaz .

Has giňişleýin maglumat üçin JavaScript resminamalarymyza serediň .

.modal(options)

Mazmunyňyzy modal hökmünde işjeňleşdirýär. Goşmaça wariantlary kabul edýär object.

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

.modal('toggle')

Modal bilen el bilen çalşyň. Modal hakykatdanam görkezilmän ýa-da gizlenmänkä (ýagny waka shown.bs.modalýa-da hidden.bs.modalwaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär.

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

.modal('show')

Modal bilen el bilen açýar. Modal görkezilmänkä (ýagny shown.bs.modalwaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär.

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

.modal('hide')

Modaly el bilen gizleýär. Modal aslynda gizlenmänkä (ýagny waka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär .hidden.bs.modal

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

.modal('handleUpdate')

Modalyň beýikligi açyk wagty üýtgese (meselem, aýlaw paneli peýda bolan ýagdaýynda) modalyň ýagdaýyny el bilen düzüň.

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

.modal('dispose')

Bir elementiň modalyny ýok edýär.

Wakalar

“Bootstrap” -yň modal synpy modal işleýşi üçin birnäçe wakany paş edýär. Modhli modal wakalar modalyň özünde (ýagny <div class="modal">).

Çäräniň görnüşi Düşündiriş
show.bs.modal showBu waka mysal usuly çagyrylanda derrew ýanýar . Bir gezek basmak bilen ýüze çykan bolsa, basylan element relatedTargetwakanyň häsiýeti hökmünde elýeterlidir.
görkezilen.bs.modal Bu waka modal ulanyja görünen mahaly atylýar (CSS geçişleriniň tamamlanmagyna garaşýar). Bir gezek basmak bilen ýüze çykan bolsa, basylan element relatedTargetwakanyň häsiýeti hökmünde elýeterlidir.
hide.bs.modal Bu waka hidemysal usuly çagyrylanda derrew atylýar.
gizlenen.bs.modal Bu waka, modal ulanyjydan gizlenip gutarandan soň atylýar (CSS geçişleriniň tamamlanmagyna garaşýar). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})