Source

Modal

Diriša polaka ya mokgwa wa JavaScript ya Bootstrap go oketša dipoledišano saeteng ya gago bakeng sa mapokisi a seetša, ditsebišo tša modiriši, goba diteng tša tlwaelo ka mo go feletšego.

Kamoo e šomago ka gona

Pele o thoma ka karolo ya modal ya Bootstrap, kgonthišetša gore o bala tše di latelago ka ge dikgetho tša rena tša thepo di sa tšwa go fetoga.

  • Di-modal di agilwe ka HTML, CSS, le JavaScript. Ba beilwe godimo ga se sengwe le se sengwe ka go tokomane gomme ba tloša go phutholla go tšwa go <body>gore diteng tša modal di phutholle go e na le moo.
  • Tobetsa ka modal “backdrop” tla ka tsela e iketsang koala modal.
  • Bootstrap e thekga feela lefasetere le tee la modal ka nako. Di-modal tše di tsentšwego ka gare ga di-nested ga di thekgwe ka ge re dumela gore ke maitemogelo a mabe a modiriši.
  • Modals use position: fixed, yeo ka dinako tše dingwe e ka bago e kgethegilego go se nene ka phetolelo ya yona. Nako le nako ge go kgonega, bea HTML ya gago ya modal maemong a maemo a godimo go efoga tšhitišo yeo e ka bago gona go tšwa go dielemente tše dingwe. Go na le kgonagalo ya gore o tla thulana le ditaba ge o bea a .modalka gare ga elemente ye nngwe ye e sa fetogego.
  • Hape, ka lebaka la position: fixed, ho na le ba bang ba caveats le ho sebelisa modals ka disebediswa tsa selefouno. Bona ditokomane tša rena tša thekgo ya sephephediši bakeng sa dintlha.
  • Ka lebaka la ka moo HTML5 e hlalošago semantiki ya yona, seka sa autofocusHTML ga se na mafelelo ka go dimodal tša Bootstrap. Go fihlelela mafelelo a swanago, diriša JavaScript e itšego ya tlwaelo:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Phello ya dipopaye ya karolo ye e ithekgile ka prefers-reduced-motionpotšišo ya methopo ya ditaba. Bona karolo ya tšhišinyego ye e fokoditšwego ya ditokomane tša rena tša phihlelelo .

Tšwela pele o bala bakeng sa di-demo le ditlhahlo tša tšhomišo.

Mehlala

Ka tlase ke mohlala wa modal wa go se fetogeposition (go ra gore wa yona le displayba fedile ka thoko). Go akareditšwe ke hlogo ya modal, mmele wa modal (o nyakegago bakeng sa padding), le letlakala la ka tlase la modal (ya boikgethelo). Re kgopela gore o akaretše dihlogo tša modal ka ditiro tša go raka neng le neng ge go kgonega, goba o nee kgato ye nngwe ya go raka ye e lego pepeneneng.

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

Toggle e sebetsang modal demo ka ho tobetsa konopo e ka tlase. E tla thelela fase gomme ya fifala ka gare go tšwa godimo ga letlakala.

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

Lemorago la go se fetoge

Ge backdrop e beakantšwe go static, modal e ka se tswalele ge o klika ka ntle ga yona. Tobetsa konopo e ka tlase ho e leka.

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

Go kgokološa diteng tše telele

Ge di-modal di e-ba tše telele kudu bakeng sa lefelo la go lebelela la modiriši goba sedirišwa, di sepelasepela di ikemetše ka letlakaleng ka bolona. Leka demo ye e lego ka mo tlase go bona seo re se bolelago.

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

O ka hlama gape le modal ye e ka kgokologago yeo e dumelelago go sepelasepela mmele wa modal ka go tlaleletša .modal-dialog-scrollablego .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>

E tsepame thwii

Oketša .modal-dialog-centeredgo .modal-dialoggo thwii bogareng bja 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>

Dikeletšo tša didirišwa le di-popovers

Tooltips le popovers di ka bewa ka gare ga modals ge go nyakega. Ge di-modal di tswalelwa, didirišwa dife goba dife le di-popover ka gare le tšona di a lahlwa ka go iketla.

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

Go diriša keriti

Diriša tshepedišo ya keriti ya Bootstrap ka gare ga modal ka go bea dihlaga .container-fluidka gare ga .modal-body. Ka morago, diriša diklase tše di tlwaelegilego tša tshepedišo ya keriti bjalo ka ge o be o tla dira kae goba kae.

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

Diteng tša modal tše di fapanego

Na o na le sehlopha sa dikonope tšeo ka moka di hlohleletšago modal e swanago ka dikagare tše di fapanego ganyenyane? Šomiša event.relatedTargetle dika tša HTMLdata-* (mohlomongwe ka jQuery ) go fapantšha dikagare tša modal go ya ka gore ke konope efe yeo e kgottšwego.

Ka tlase ke demo e phelang e latelwa ke mohlala HTML le JavaScript. Bakeng sa tshedimošo ye ntši, bala ditokomane tša ditiragalo tša modal bakeng sa dintlha ka ga 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)
})

Fetola ditshwantsho tse di phelang

The feto- $modal-fade-transformfetohang e laola boemo ba fetola ba .modal-dialogpele ho modal fifala-ka animatsioon, $modal-show-transformphetoho e laola phetoho ea .modal-dialogqetellong ea modal fifala-ka animatsioon.

Ge o nyaka mohlala animation ya go godiša, o ka beakanya $modal-fade-transform: scale(.8).

Tlosa ditshwantsho tse di phelang

Bakeng sa di-modal tšeo di fo tšwelelago go e na le go fifala ka gare go lebelela, tloša .fadesehlopha go tšwa go leswao la gago la modal.

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

Bophahamo ba mafolofolo

Ge e le gore bophagamo bja modal bo fetoga ge e bulegile, o swanetše go bitša $('#myModal').modal('handleUpdate')go beakanya gape maemo a modal ge go ka direga gore go tšwelele bara ya go sepelasepela.

Phihlelelo

Kgonthiša gore o tlaleletša role="dialog"le aria-labelledby="...", o šupa sehlogo sa modal, go .modal, le role="document"go yona .modal-dialogka boyona. Go tlaleletša, o ka fa tlhalošo ya poledišano ya gago ya modal ka aria-describedbygo .modal.

Go tsenya dibidio tša YouTube

Go tsenya dibidio tša YouTube ka gare ga modals go nyaka JavaScript ya tlaleletšo e sego ka go Bootstrap go emiša ka go iketla go bapala le tše dingwe. Bona poso ye e thušago ya Stack Overflow bakeng sa tshedimošo e oketšegilego.

Bogolo bja boikgethelo

Di-modal di na le bogolo bjo bo tharo bja boikhethelo, bjo bo hwetšagalago ka dihlopha tša sefetoši tšeo di tlago go bewa godimo ga .modal-dialog. Bogolo bjo bo tsena ka gare ga mafelo a itšego a go kgaotša go efoga dibara tša go sepelasepela tše di rapaletšego go dipono tše tshesane.

Bogolo Phapoši Modal max-bophara
Nnyane .modal-sm 300px
Hlokomologa Ga go selo 500px
Kgolo .modal-lg 800px
E kgolo e eketsehileng .modal-xl 1140px

Modal ya rena ya go se fetoge ntle le sehlopha sa sefetoši se bopa modal ya bogolo bja “magareng”.

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

Tšhomišo

Plugin ya modal e fetoša diteng tša gago tše di utilwego ge di nyakega, ka dika tša datha goba JavaScript. E tlaleletša gape .modal-opengo <body>go tloša boitshwaro bja go kgokološa bja go se fetoge gomme e tšweletša a .modal-backdropgo fa lefelo la go klika bakeng sa go lahla di-modal tše di bontšhitšwego ge o kgotla ka ntle ga modal.

Ka dika ya data

Dira gore modal e šome ntle le go ngwala JavaScript. Beakanya data-toggle="modal"godimo ga elemente ya molaodi, go swana le konope, gotee le data-target="#foo"goba href="#foo"go nepiša modal ye e itšego go fetola.

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

Ka JavaScript

Bitsa modal ka id myModalka mola o le mong oa JavaScript:

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

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-backdrop="".

Leina Mohuta Hlokomologa Tlhalošo
lemorago la ka morago boolean goba thapo'static' nnete E akaretša elemente ya modal-backdrop. Ka go fapana le moo, laetša staticbakeng sa backdrop yeo e sa tswalelego modal ka go klika goba go tobetsa senotlelo sa go tšhaba.
khiiboto ya boolean ya go swana nnete E tswalela modal ge senotlelo sa go tšhaba se tobetšwe
nepa boolean ya go swana nnete E bea tsepamiso ya kgopolo go modal ge e thongwa.
bontšha boolean ya go swana nnete E bontšha modal ge e thongwa.

Mekgwa ya go šoma

Mekgwa ya asynchronous le diphetogo

Mekgwa ka moka ya API ga e na asynchronous gomme e thoma phetogo . Ba boela go motho yo a leletšago mogala gateetee ge phetogo e thomilwe eupša pele e fela . Go tlaleletša, pitšo ya mokgwa go karolo ya phetogo e tla hlokomologwa .

Bona ditokomane tša rena tša JavaScript bakeng sa tshedimošo e oketšegilego .

.modal(options)

E dira gore diteng tša gago di šome bjalo ka modal. E amogela dikgetho tša boikhethelo object.

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

.modal('toggle')

Ka seatla e fetola modal. E boela go mogala pele ga ge modal e tloga e bontšhitšwe goba e utilwe (ke gore pele ga ge tiragalo ya shown.bs.modalgoba hidden.bs.modale direga).

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

.modal('show')

Ka letsoho bula e modal. E boela go mogala pele ga ge modal e bontšhitšwe e le ka kgonthe (ke gore pele ga ge shown.bs.modaltiragalo e direga).

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

.modal('hide')

Ka seatla e pata modal. E boela go mogala pele ga ge modal e tloga e utilwe (ke gore pele ga ge hidden.bs.modaltiragalo e direga).

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

.modal('handleUpdate')

Beakanya gape ka seatla maemo a modal ge e le gore bophagamo bja modal bo fetoga ge e bulegile (ke gore ge go ka direga gore go tšwelele bara ya go sepelasepela).

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

.modal('dispose')

E senya modal ya elemente.

Ditiragalo

Bootstrap o modal sehlopha pepesa liketsahalo tse seng kae bakeng sa hooking ka modal tshebetso. Ditiragalo ka moka tša modal di thuntšhwa go modal ka boyona (ke gore go <div class="modal">).

Mohuta wa Tiragalo Tlhalošo
bontša.bs.modal Tiragalo ye e thunya ka pela ge showmokgwa wa mohlala o bitšwa. Ge e bakwa ke go klika, elemente ye e klikilwego e hwetšagala bjalo ka relatedTargetthepa ya tiragalo.
e bontšhitšwe.bs.modal Tiragalo ye e thuntšhwa ge modal e dirilwe gore e bonagale go modiriši (e tla emela gore diphetogo tša CSS di phethe). Ge e bakwa ke go klika, elemente ye e klikilwego e hwetšagala bjalo ka relatedTargetthepa ya tiragalo.
pata.bs.modal Tiragalo ye e thuntšhwa ka pela ge hidemokgwa wa mohlala o biditšwe.
e utilwego.bs.modal Tiragalo ye e thuntšhwa ge modal e feditše go utollwa go tšwa go modiriši (e tla emela gore diphetogo tša CSS di phethe).
pataE thibetšwe.bs.modal Tiragalo ye e thuntšhwa ge modal e bontšhwa, backdrop ya yona ke staticgomme go kgotla ka ntle ga modal goba go tobetša senotlelo sa go tšhaba go a dirwa. 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})