Modal a ni

Bootstrap-a JavaScript modal plugin hmangin i site-ah dialog dah la, lightbox, user notification emaw, custom content kimchang emaw a awm thei ang.

A hnathawh dan

Bootstrap-a modal component i hman tan hmain a hnuaia mi hi chhiar hmasa phawt ang che, tun hnaia kan menu option te a danglam tawh avangin.

Modal te hi HTML, CSS, leh JavaScript hmanga siam a ni. Document chhunga thil dang zawng zawng chungah an dah a, scroll atang chuan an paih chhuak a, <body>chutiang chuan modal content chu a scroll zawk ang.
Modal “backdrop” click chuan modal chu a khar nghal vek ang.
Bootstrap hian modal window pakhat chauh a support a. Nested modal te hi user experience tha lo tak an nih kan rin avangin an support lo.
Modals use position: fixed, chu chu a rendering chungchangah hian a chang chuan a particular deuh thei. A theih phawt chuan element dangte’n an tihbuai theih loh nan i modal HTML chu top-level position-ah dah la. .modalFixed element dang chhunga a nest hunah issue i tawk mai thei .
Vawi khat chu, due to position: fixed, mobile device-a modal hman chungchangah caveat thenkhat a awm bawk. A chipchiar zawkna chu kan browser support docs ah hian en rawh .
HTML5 hian a semantics a sawifiah dan avang hian HTML autofocusattribute hian Bootstrap modal-ah nghawng a nei lo. Chutiang bawka effect nei tur chuan custom JavaScript thenkhat hmang la:

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

He component hian animation effect hi prefers-reduced-motionmedia query ah a innghat a ni. Kan accessibility documentation a reduced motion tih hi en la .

Demo leh hman dan tur kaihhruaina chhiar chhunzawm zel ang che.

Entirna te

A hnuaia tarlan te hi static modal entirnan (a awmzia chu its positionand displayhave been overridden tihna a ni). A chhungah hian modal header, modal body (a mamawh tur padding), leh modal footer (optional) te pawh a tel. A theih phawt chuan dismiss action nen modal header te dah tel turin kan ngen a, a nih loh leh dismiss action chiang tak dang pe turin kan ngen bawk.

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

Live demo a ni ang

A hnuaia button hi click la, working modal demo chu toggle rawh. A hnuai lam a pan ang a, page chunglam atang chuan a fade in ang.

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

Static backdrop a ni

Backdrop chu static-a dah a nih chuan modal chu a pawn lama click-naah a khar dawn lo. A hnuaia button hi click la, enchhin rawh.

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

Content thui tak tak scroll

Modal te chu user viewport emaw device emaw atan a sei lutuk chuan page ngei atanga innghat lovin an scroll thin. Kan sawi tum chu a hnuaia demo hi han en teh.

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.

Scrollable modal pawh i siam thei a, chu chuan modal body chu scroll theihna a siam a, chu .modal-dialog-scrollablechu .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>

Vertically centered a ni

Add .modal-dialog-centeredto .modal-dialogah chuan modal chu vertically center ah dah rawh.

<!-- 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 leh popovers te pawh a awm bawk

Tooltip leh popover te chu a tul angin modal chhungah dah theih a ni. Modal khar a nih chuan a chhunga tooltip leh popover awm apiang chu automatic in a dismis vek bawk.

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

Grid hmangin

Bootstrap grid system chu modal chhungah hmang la .container-fluid, .modal-body. Tichuan, hmun dangah i tih ang bawkin grid system class pangngai te chu hmang ang che.

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

Button bunch khat, modal khata trigger vek, content hrang hrang tlem nei? Use event.relatedTargetleh HTML data-*attributes ( jQuery kaltlangin pawh ni thei ) hmangin modal chhunga thu awmte chu eng button nge click tih a zirin a danglam thei.

A hnuaiah hian live demo a awm a, chu chu entirnan HTML leh JavaScript a ni. Hriat belh duh chuan modal events docs chhiar la , 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)
})

Animation thlak danglam rawh

Variable hian modal fade-in animation hmaa $modal-fade-transformtransform state a tichiang a, variable chuan modal fade-in animation tawp lamah transform of a ruat bawk..modal-dialog$modal-show-transform.modal-dialog

Entirnan zoom-in animation i duh chuan $modal-fade-transform: scale(.8).

Animation chu paih chhuak rawh

En tur fade in ai chuan modal lang mai mai tur tan chuan .fadei modal markup atang khan class chu paih chhuak rawh.

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

Dynamic sang tak tak a awm

Modal hawn laiin a san zawng a inthlak $('#myModal').modal('handleUpdate')chuan scrollbar a rawn lang palh hlauh chuan modal awmna tur siamthat leh turin i call tur a ni.

A thlen theihna tur

aria-labelledby="...", modal title reference-in, -ah hian add ngei ang che .modal. Tin, i modal dialog chungchang sawifiahna chu aria-describedbyon hmangin i pe thei .modalbawk. role="dialog"JavaScript hmanga kan add tawh avangin add a ngai lo tih hre reng ang che .

YouTube video te embedding a ni

YouTube video modal-a embede tur chuan Bootstrap-a awm lo JavaScript dang a ngai a, chu chuan playback chu automatic-in a titawp thei a, thil dang tam tak a titawp thei bawk. Hrechiang duh tan he Stack Overflow post \angkai tak hi en la .

A duh duh size te pawh a awm bawk

Modal hian optional size pathum a nei a, modifier class kaltlangin a .modal-dialog. Heng size te hi breakpoint thenkhatah an kick in thin a, chu chuan viewport tawi zawka horizontal scrollbar awm loh nan.

Lenzawng tehna	Pawl	Modal max-a zau zawng a ni
Te	`.modal-sm`	`300px`
Hlawhchhamna	Pakhatmah	`500px`
Hrawl	`.modal-lg`	`800px`
Extra lian tak a ni	`.modal-xl`	`1140px`

Kan default modal awm lo modifier class hian “medium” size modal a siam a.

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

Hman dan tur

Modal plugin hian i thup thup chu a mamawh angin a toggle a, data attribute emaw JavaScript hmangin a toggle thei bawk. .modal-openTin , <body>to override default scrolling behavior ah a dah belh bawk a .modal-backdrop, modal pawn lama click hunah shown modals dismiss theihna tur click area a siam bawk.

Data attribute hmangin a ni

JavaScript ziak lovin modal pakhat activate rawh. data-toggle="modal"Controller element, button ang chi, a data-target="#foo"or href="#foo"toggle tur modal bik target tur nen set rawh .

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

JavaScript hmangin

myModalJavaScript line khata id nei modal chu ko rawh :

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

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-, data-backdrop="".

Hming	Lampang	Hlawhchhamna	Hrilhfiahna
backdrop a ni	boolean emaw a string emaw a ni`'static'`	dik	Modal-backdrop element a awm bawk. `static`A nih loh leh, click-a modal khar lo backdrop atan specify bawk ang che.
keyboard hmangin a ziak a	boolean a ni	dik	Escape key i hmet chuan modal a khar thin
tumbik nei	boolean a ni	dik	Initialized hunah modal ah focus a dah thin.
lantir	boolean a ni	dik	Initialized hunah modal a lantir.

Thiltih dan tur

Asynchronous method leh inthlak danglamna te

API method zawng zawng hi asynchronous a ni a , transition a tan vek a ni . Transition an tan veleh mahse a tawp hmain call tu hnenah an kir leh thin . Chu bakah, transitioning component-a method call chu ngaihthah a ni ang .

Hriat belh duh chuan kan JavaScript documentation en rawh .

`.modal(options)`

I content chu modal angin a activate thin. A pawm a, optional options a awm objectbawk .

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

`.modal('toggle')`

Modal pakhat chu manual in a toggle thin. Modal a lan tak tak hma emaw a thup hma emaw (chu chu shown.bs.modalor hidden.bs.modalevent a thlen hma) caller hnenah a kir leh thin.

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

`.modal('show')`

Manual takin modal a hawng thin. Modal a lan tak takshown.bs.modal hmain (chu chu event a thlen hmain ) caller hnenah a kir leh thin.

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

`.modal('hide')`

Manual takin modal a thup thin. Modal a thup tak tak hmain (chu chu hidden.bs.modalevent a thlen hma) caller hnenah a kir leh thin.

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

`.modal('handleUpdate')`

Modal hawn laiin a san zawng a inthlak chuan (chu chu scrollbar a rawn lang a nih chuan) modal awmna tur chu manual-in siam \ha leh rawh.

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

`.modal('dispose')`

Element pakhat modal a tichhia.

Thil thlengte

Bootstrap-a modal class hian modal functionality-a hooking-na tur event tlemte a pholang a ni. Modal event zawng zawng hi modal ngeiah (ie at the <div class="modal">).

Thil thleng chi hrang hrang	Hrilhfiahna
show.bs.modal a ni	`show`He event hi instance method kan koh chuan a fire nghal vek a ni. Click avanga lo awm a nih chuan click element chu `relatedTarget`event property atan a awm thei.
tih a ni.bs.modal	He event hi modal chu user hmuh theiha siam a nih hunah fire a ni (CSS transition zawh hun a nghak ang). Click avanga lo awm a nih chuan click element chu `relatedTarget`event property atan a awm thei.
thup.bs.modal a ni	`hide`He event hi instance method koh a nih chuan a fire nghal a ni.
thup.bs.modal tih a ni	He event hi modal chu user hnen atanga thup a nih zawh chuan a fire thin (CSS transitions zawh hun a nghak ang).
thup theih loh.bs.modal	He event hi modal a lan hian a fire a, a backdrop a nih `static`chuan modal pawn lama click emaw escape key press emaw hmangin keyboard option emaw `data-keyboard`set `false`to

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