Source

Modal nga

Usaren ti JavaScript modal plugin ti Bootstrap tapno manginayon kadagiti dialogo iti site-mo para kadagiti lightbox, pakaammo ti agar-aramat, wenno naan-anay a kostumbre a linaon.

No kasano ti panagandar dayta

Sakbay a mangrugi iti modal a paset ti Bootstrap, siguraduen a basaen dagiti sumaganad ta nabiit pay a nagbaliw dagiti pagpilianmi iti menu.

Dagiti modal ket naibangon babaen ti HTML, CSS, ken JavaScript. Dagitoy ket naiposision iti rabaw ti amin a dadduma pay iti dokumento ken ikkaten ti panag-scroll manipud iti <body>tapno ti modal a linaon ket ag-scroll ketdi.
Ti panangi-click iti modal a “backdrop” ket automatiko nga iserrana ti modal.
Ti Bootstrap ket mangsuporta laeng ti maysa a modal a tawa iti tunggal maysa a gundaway. Dagiti naisanglad a modal ket saan a nasuportaran a kas patienmi a dagitoy ket nakurapay a padas ti agar-aramat.
Dagiti modal ket agus-usar ti position: fixed, a mabalin a no dadduma ket bassit a partikular maipapan ti panagiparangna. No mabalin, ikabilmo ti modal nga HTML-mo iti kangatuan nga antas a posision tapno maliklikan ti mabalin a pannakasinga manipud kadagiti sabali nga elemento. Mabalin a makasabatka kadagiti isyu no ag-umok ti maysa iti .modaluneg ti sabali a naikeddeng nga elemento.
Maminsan manen, gapu iti position: fixed, adda sumagmamano a pakdaar iti panangusar kadagiti modal kadagiti mobile device. Kitaen dagiti dokumento ti suporta ti browsermi para kadagiti detalye.
Gapu ti no kasano a ti HTML5 ket mangikeddeng ti semantikana, ti autofocuskabileg ti HTML ket awan ti epektona kadagiti modal ti Bootstrap. Tapno magun-od ti isu met laeng nga epekto, agusarka iti sumagmamano a kostumbre a JavaScript:

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

Ti epekto ti animasion daytoy a paset ket agpannuray iti prefers-reduced-motionpanagsaludsod ti media. Kitaen ti benneg ti naikkat a panaggunay ti dokumentasionmi ti pannakagun-od .

Itultuloymo ti agbasa para kadagiti demo ken pagannurotan ti panagusar.

Dagiti pagarigan

Iti baba ket ti estatiko a modal a pagarigan (kayatna a sawen ti its positionand displayhave been overridden). Nairaman ti modal nga ulo, modal a bagi (kasapulan para iti padding), ken modal footer (opsional). Kiddawenmi nga iramanmo dagiti modal nga ulo nga addaan kadagiti panagikkat a panagtignay no mabalin, wenno mangipaay ti sabali a nalawag a panagikkat a panagtignay.

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

Agbiag nga demo

I-toggle ti agtartrabaho a modal demo babaen ti panangi-klik iti buton iti baba. Ag-slide dayta nga agpababa ken agkupas manipud iti ngato ti panid.

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

Estatiko nga backdrop

No ti backdrop ket naikabil iti estatiko, ti modal ket saan nga agserra no ag-click iti ruar daytoy. I-click ti button iti baba tapno padasem dayta.

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

Panag-scroll iti atiddog a linaon

No dagiti modal ket agbalin nga atiddog unay para iti viewport wenno alikamen ti agar-aramat, ag-scrollda nga agwaywayas iti panid a mismo. Padasem ti demo iti baba tapno makitam no ania ti kayatmi a sawen.

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

Mabalinmo pay ti mangpartuat ti mai-scroll a modal a mangipalubos ti panag-scroll ti bagi ti modal babaen ti pananginayon .modal-dialog-scrollableiti .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>

Bertikal a naisentro

Inayon .modal-dialog-centerediti .modal-dialogtapno bertikal a sentro ti 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 ken popovers

Mabalin nga ikabil dagiti Tooltip ken popover iti uneg dagiti modal no kasapulan. No dagiti modal ket naserraan, ania man a toltips ken popovers iti uneg ket automatiko met a mailaksid.

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

Panangusar iti grid

Usaren ti sistema ti grid ti Bootstrap iti uneg ti maysa a modal babaen ti panagumok .container-fluiditi uneg ti .modal-body. Kalpasanna, usarem dagiti gagangay a klase ti sistema ti grid a kas iti aramidem iti sadinoman.

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

Adda kadi bunggoy dagiti buton nga amin ket mangtignay iti isu met laeng a modal nga addaan iti naiduma bassit a linaon? Usaren event.relatedTargetken dagiti HTML data-*a kababalin (mabalin babaen ti jQuery ) tapno agbaliw ti linaon ti modal depende no ania a buton ti nai-klik.

Iti baba ket ti live demo a sarunuen ti pagarigan nga HTML ken JavaScript. Para iti ad-adu pay nga impormasion, basaen dagiti modal events docs para kadagiti detalye iti 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)
})

Baliwan ti animasion

Ti $modal-fade-transformvariable ket mangikeddeng ti kasasaad ti panagbalbaliw ti .modal-dialogsakbay ti modal a fade-in nga animasion, ti $modal-show-transformvariable ket mangikeddeng ti panagbalbaliw ti .modal-dialogiti ngudo ti modal a fade-in nga animasion.

No kayatmo kas pagarigan ti zoom-in nga animasion, mabalinmo nga ikeddeng ti $modal-fade-transform: scale(.8).

Ikkaten ti animasion

Para kadagiti modal a basta agparang imbes nga agkupas tapno makita, ikkaten ti .fadeklase manipud iti modal markup-mo.

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

Dinamiko a kangato

No agbaliw ti kangato ti maysa a modal bayat a nakalukat daytoy, rumbeng nga umawagka $('#myModal').modal('handleUpdate')tapno ilinteg manen ti posision ti modal no bilang ta agparang ti scrollbar.

Ti pannakagun-od

Siguraduen nga inayon role="dialog"ken aria-labelledby="...", a mangireperensia iti modal a paulo, iti .modal, ken role="document"iti .modal-dialogmismo. Mainayon pay, mabalinmo nga ited ti panangiladawan ti modal a dialogom babaen ti aria-describedbyon .modal.

Panangikabil kadagiti video iti YouTube

Ti panangikabil kadagiti video ti YouTube kadagiti modal ket kasapulan ti kanayonan a JavaScript nga awan iti Bootstrap tapno automatiko a maisardeng ti panagtokar ken dadduma pay. Kitaen daytoy a makatulong a Stack Overflow a post para iti ad-adu pay nga impormasion.

Opsional a kadakkel

Dagiti modal ket addaan kadagiti tallo a pagpilian a kadakkel, a magun-od babaen dagiti klase ti mangbalbaliw a maikabil iti maysa a .modal-dialog. Dagitoy a kadakkel ket agkick in kadagiti sumagmamano a breakpoint tapno maliklikan dagiti horizontal scrollbar kadagiti akikid a viewport.

Kadakkel	Klase	Modal nga max-kalawa
Bassit	`.modal-sm`	`300px`
Default	Awan	`500px`
Dakkel	`.modal-lg`	`800px`
Ekstra ti dakkel	`.modal-xl`	`1140px`

Ti default a modaltayo nga awan ti klase ti modifier ket mangbukel ti “medium” a kadakkel a modal.

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

Panagusar

Ti modal a plugin ket mangbalbaliw ti nailemmeng a linaonmo no kasapulan, babaen dagiti attribute ti datos wenno JavaScript. Daytoy ket manginayon pay .modal-openiti <body>tapno mangbalbaliw ti kasisigud a kababalin ti panag-scroll ken mangpataud ti a .modal-backdroptapno mangipaay ti lugar ti panagpidut para iti panangilaksid kadagiti naipakita a modal no ag-klik iti ruar ti modal.

Babaen kadagiti attribute ti datos

Aktiboen ti modal a saan nga agsurat iti JavaScript. Itakderan data-toggle="modal"iti maysa nga elemento ti kontrolador, a kas ti buton, agraman ti maysa data-target="#foo"wenno href="#foo"tapno puntiriaen ti espesipiko a modal tapno ag-toggle.

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

Babaen ti JavaScript

Awagan ti modal nga addaan iti id myModalnga addaan iti maymaysa a linia ti JavaScript:

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

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-backdrop="".

Nagan	Tipo	Default	Panangiladawan
backdrop ti likud	boolean wenno ti kuerdas`'static'`	agpayso	Iramanna ti modal-backdrop nga elemento. Saan laeng a dayta, ikeddeng `static`para iti maysa a backdrop a saan a mangiserra ti modal iti panag-click wenno iti panag-escape key press.
teklado nga	boolean nga	agpayso	Serraan ti modal no maipidut ti escape key
agperreng	boolean nga	agpayso	Ikabilna ti pokus iti modal no mairugi.
ipakita	boolean nga	agpayso	Ipakita ti modal no mairugi.

Dagiti Pamay-an

Dagiti asynchronous a pamay-an ken panagbalbaliw

Amin a pamay-an ti API ket asynchronous ken mangrugi ti panagbalbaliw . Agsublida iti tumawag apaman a mairugi ti panagbalbaliw ngem sakbay nga agpatingga . Iti pay maipatinayon, ti maysa nga awag ti pamay-an iti maysa a panagbalbaliw a paset ket mailaksidto .

Kitaen ti dokumentasionmi iti JavaScript para iti ad-adu pay nga impormasion .

`.modal(options)`

Aktiboenna ti linaonmo kas modal. Awaten ti maysa nga opsional a pagpilian object.

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

`.modal('toggle')`

Manual nga i-toggle ti maysa a modal. Agsubli iti tumawag sakbay nga aktual a naipakita wenno nailemmeng ti modal (kayatna a sawen sakbay a mapasamak ti shown.bs.modalwenno hidden.bs.modalpasamak).

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

`.modal('show')`

Manual a luktan ti maysa a modal. Agsubli iti tumawag sakbay nga aktual a naipakita ti modal (kayatna a sawen sakbay a shown.bs.modalmapasamak ti pasamak).

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

`.modal('hide')`

Manual nga ilemmeng ti maysa a modal. Agsubli iti tumawag sakbay nga aktual a nailemmeng ti modal (kayatna a sawen sakbay a hidden.bs.modalmapasamak ti pasamak).

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

`.modal('handleUpdate')`

Manual nga i-adjust manen ti posision ti modal no agbaliw ti kangato ti modal bayat a nakalukat (kayatna a sawen no agparang ti scrollbar).

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

`.modal('dispose')`

Dadaelenna ti modal ti maysa nga elemento.

Dagiti Pasamak

Ti modal a klase ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti modal a panagusar. Amin a modal a pasamak ket maipaputok iti modal a mismo (kayatna a sawen iti <div class="modal">).

Kita ti Pasamak	Panangiladawan
ipakita.bs.modal nga	Daytoy a pasamak ket agputok a dagus no ti `show`pamay-an ti pagarigan ket maawagan. No gapuanan ti panagpidut, ti nai-klik nga elemento ket magun-od a kas ti `relatedTarget`tagikua ti pasamak.
naipakita.bs.modal	Daytoy a pasamak ket mapaputok no ti modal ket naaramiden a makita ti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a malpas). No gapuanan ti panagpidut, ti nai-klik nga elemento ket magun-od a kas ti `relatedTarget`tagikua ti pasamak.
ilemmeng.bs.modal nga	Daytoy a pasamak ket dagus a mapaputok no ti `hide`pamay-an ti pagarigan ket naawagan.
nailemmeng.bs.modal	Daytoy a pasamak ket mapaputok no ti modal ket nalpas a nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a malpas).
ilemmengNalappedan.bs.modal	Daytoy a pasamak ket mapaputok no ti modal ket maipakita, ti backdropna ket `static`ken ti maysa a panagpidut iti ruar ti modal wenno ti maysa nga escape key press ket maaramid.

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