Modal

Cleachd plugan modal JavaScript Bootstrap gus còmhraidhean a chuir ris an làrach agad airson bogsaichean aotrom, fiosan cleachdaiche, no susbaint gu tur àbhaisteach.

Mar a tha e ag obair

Mus tòisich thu le modal modal Bootstrap, bi cinnteach gun leugh thu na leanas oir tha na roghainnean clàr againn air atharrachadh o chionn ghoirid.

Tha modalan air an togail le HTML, CSS, agus JavaScript. Tha iad suidhichte thairis air a h-uile càil eile san sgrìobhainn agus thoir air falbh an scrolla bhon chlàr <body>gus am bi susbaint modal a’ gluasad nan àite.
Ma bhriogas tu air a’ mhodal “cùl-raon” dùinidh sin am modal gu fèin-obrachail.
Chan eil Bootstrap a’ toirt taic ach do aon uinneag modal aig an aon àm. Chan eil modalan neadachaidh a’ faighinn taic oir tha sinn den bheachd gur e droch eòlas luchd-cleachdaidh a th’ annta.
Bidh modalan a’ cleachdadh position: fixed, a dh’ fhaodas uaireannan a bhith beagan sònraichte mu dheidhinn a thoirt seachad. Far a bheil e comasach, cuir do HTML modal ann an suidheachadh àrd-ìre gus casg a chuir air eileamaidean eile a sheachnadh. Is dòcha gum bi duilgheadasan agad nuair a bhios tu a’ neadachadh taobh a- .modalstaigh eileamaid stèidhichte eile.
A-rithist, air sgàth position: fixed, tha cuid de uaimhean ann a thaobh a bhith a’ cleachdadh mhodalan air innealan gluasadach. Faic na docaichean taic brabhsair againn airson mion-fhiosrachadh.
Air sgàth mar a tha HTML5 a’ mìneachadh a semantics, chan eil buaidh sam bith aig feart HTML ann amautofocus modalan Bootstrap. Gus an aon bhuaidh a choileanadh, cleachd cuid de JavaScript àbhaisteach:

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

Tha buaidh beothalachd na co-phàirt seo an urra ri prefers-reduced-motionceist nam meadhanan. Faic an earrann gluasad lùghdaichte de na sgrìobhainnean ruigsinneachd againn .

Cùm a’ leughadh airson demos agus stiùireadh cleachdaidh.

Eisimpleirean

Gu h-ìosal tha eisimpleir modal statachposition (a’ ciallachadh gu bheil e agus displaygun deach a thoirt thairis). Nam measg tha bann-cinn modal, bodhaig modal (riatanach airson padding), agus bonn-coise modal (roghainneil). Bidh sinn ag iarraidh gun cuir thu a-steach cinn-cinn modal le gnìomhan cuir às nuair as urrainnear, no gun toir thu seachad gnìomh diùltadh soilleir eile.

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

Demo beò

Tog demo modal obrach le bhith a’ briogadh air a’ phutan gu h-ìosal. Bidh e a 'sleamhnachadh sìos agus a' seargadh a-steach bho mhullach na duilleige.

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

Cùl-raon statach

Nuair a tha an cùl-raon air a shuidheachadh gu statach, cha dùin am modal nuair a bhriogas tu air taobh a-muigh. Cliog air a’ phutan gu h-ìosal gus feuchainn air.

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

Sgrolaich susbaint fada

Nuair a dh'fhàsas modalan ro fhada airson sealladh no inneal an neach-cleachdaidh, gluaisidh iad gu neo-eisimeileach bhon duilleag fhèin. Feuch an demo gu h-ìosal gus faicinn dè tha sinn a’ ciallachadh.

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.

Faodaidh tu cuideachd modal scrollable a chruthachadh a leigeas leat a’ bhuidheann modal a sgrùdadh le bhith a’ cur .modal-dialog-scrollableri .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>

Meadhanach gu dìreach

Cuir .modal-dialog-centeredris .modal-dialoga 'mhodal gu dìreach sa mheadhan.

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

Molaidhean innealan agus popovers

Faodar molaidhean innealan agus popovers a chuir ann am modalan mar a dh’ fheumar. Nuair a bhios modalan dùinte, thèid molaidhean innealan agus popovers sam bith a-staigh a chuir às gu fèin-ghluasadach cuideachd.

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

A 'cleachdadh a' chliath

Cleachd siostam clèithe Bootstrap taobh a-staigh modal le bhith a’ neadachadh .container-fluidtaobh a-staigh an fhaidhle .modal-body. An uairsin, cleachd na clasaichean siostam clèithe àbhaisteach mar a dhèanadh tu an àite sam bith eile.

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

A bheil dòrlach de phutanan agad a bhrosnaicheas an aon mhodal le susbaint beagan eadar-dhealaichte? Cleachd event.relatedTargetagus buadhan HTMLdata-* ('s dòcha tro jQuery ) gus susbaint a' mhodail atharrachadh a rèir dè am putan a chaidh a bhriogadh.

Gu h-ìosal tha demo beò air a leantainn le eisimpleir HTML agus JavaScript. Airson tuilleadh fiosrachaidh, leugh na docaichean tachartasan modal airson mion-fhiosrachadh air 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)
})

Atharraich beothachadh

Bidh an $modal-fade-transformcaochladair a’ dearbhadh staid cruth-atharrachaidh .modal-dialogron bheothachadh modal fade-in, bidh an $modal-show-transformcaochladair a’ dearbhadh an cruth-atharrachadh .modal-dialogaig deireadh a’ bheòthachaidh modal fade-in.

Ma tha thu ag iarraidh mar eisimpleir beòthalachd zoom-in, faodaidh tu $modal-fade-transform: scale(.8).

Thoir air falbh beothachadh

Airson modalan a tha dìreach a’ nochdadh seach a bhith a’ seargadh a-steach ri fhaicinn, thoir air falbh an .fadeclas bhon chomharra modal agad.

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

Àrdan fiùghantach

Ma dh’ atharraicheas àirde modal fhad ‘s a tha e fosgailte, bu chòir dhut fònadh $('#myModal').modal('handleUpdate')gus suidheachadh a’ mhodail a leughadh air eagal ’s gun nochd bàr-scrollaidh.

Ruigsinneachd

Dèan cinnteach gun cuir thu aria-labelledby="...", a’ toirt iomradh air an tiotal modal, gu .modal. A bharrachd air an sin, faodaidh tu cunntas a thoirt air a’ chòmhradh modal agad le aria-describedbyon .modal. Thoir an aire nach fheum thu cur ris role="dialog"leis gu bheil sinn ga chur ris tro JavaScript mu thràth.

Cuir a-steach bhideothan YouTube

Le bhith a’ stèidheachadh bhideothan YouTube ann am modalan feumaidh JavaScript a bharrachd nach eil ann am Bootstrap gus stad a chuir air ath-chluich gu fèin-ghluasadach agus barrachd. Faic am post cuideachail Stack Overflow seo airson tuilleadh fiosrachaidh.

Meudan roghainneil

Tha trì meudan roghainneil aig modalan, rim faighinn tro chlasaichean mion-atharrachaidh airson an cur air faidhle .modal-dialog. Bidh na meudan sin a’ tòiseachadh aig puingean brisidh sònraichte gus barraichean-scrollaidh còmhnard a sheachnadh air puirt-seallaidh nas cumhainge.

Meud	Clas	Modal leud as motha
Beag	`.modal-sm`	`300px`
Deònach	Chan eil gin	`500px`
Mòr	`.modal-lg`	`800px`
Mòr a bharrachd	`.modal-xl`	`1140px`

Tha am modal bunaiteach againn gun chlas mion-atharrachaidh a’ dèanamh suas modal meud “meadhanach”.

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

Cleachdadh

Bidh am plugan modal a’ togail do shusbaint falaichte a rèir iarrtas, tro bhuadhan dàta no JavaScript. Bidh e cuideachd a’ cur .modal-openris a’ <body>ghiùlan sgrolaidh àbhaisteach a chuir dheth agus a’ gineadh a .modal-backdropgus àite cliog a sholarachadh airson a bhith a’ cur às do mhodalan a tha air an sealltainn nuair a phutas tu taobh a-muigh a’ mhodail.

Tro fheartan dàta

Cuir modal an gnìomh gun a bhith a’ sgrìobhadh JavaScript. Suidhich data-toggle="modal"air eileamaid rianadair, mar phutan, còmhla ri a data-target="#foo"no href="#foo"gus amas air modal sònraichte airson gluasad.

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

Air sgàth javascript

Cuir fòn gu modal le id myModalle aon loidhne de JavaScript:

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

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-backdrop="".

Ainm	Seòrsa	Deònach	Tuairisgeul
cùl-raon	boolean no an t-sreang`'static'`	fìor	A’ toirt a-steach eileamaid cùl-raon modal. Air neo, sònraich `static`airson cùl-raon nach dùin am modal air cliogadh.
meur-chlàr	boolean	fìor	Dùin am modal nuair a thèid an iuchair teiche a bhrùthadh
fòcas	boolean	fìor	A’ cur fòcas air a’ mhodal nuair a thèid a thòiseachadh.
seall	boolean	fìor	A’ sealltainn am modal nuair a thèid a thòiseachadh.

Dòighean-obrach

Modhan asyncronach agus eadar-ghluasadan

Tha a h-uile modh API asyncronach agus tòisichidh iad air eadar- ghluasad . Bidh iad a’ tilleadh chun neach-fios cho luath ‘s a thòisicheas an gluasad ach mus tig e gu crìch . A bharrachd air an sin, cha tèid aire a thoirt do ghairm modh air pàirt gluasaid .

Faic na sgrìobhainnean JavaScript againn airson tuilleadh fiosrachaidh .

`.modal(options)`

Cuir an t-susbaint agad an gnìomh mar mhodal. A 'gabhail ri roghainnean roghnach object.

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

`.modal('toggle')`

Tog modal le làimh. Tilleadh chun neach-fios mus deach am modal a shealltainn no fhalachshown.bs.modal ( ie mus tachair an hidden.bs.modaltachartas).

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

`.modal('show')`

Le làimh a 'fosgladh modal. Tilleadh chun neach-fios mus deach am modal a shealltainn (ie mus tachair an shown.bs.modaltachartas).

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

`.modal('hide')`

Le làimh a 'falach modal. Tilleadh chun neach-fios mus deach am modal fhalach (ie mus tachair an hidden.bs.modaltachartas).

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

`.modal('handleUpdate')`

Leugh le làimh suidheachadh a’ mhodail ma dh’ atharraicheas àirde a’ mhodail fhad ‘s a tha e fosgailte (ie gun fhios nach nochd bàr-scrollaidh).

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

`.modal('dispose')`

A 'sgrios modal eileamaid.

Tachartasan

Bidh clas modal Bootstrap a’ nochdadh grunn thachartasan airson a dhol a-steach do ghnìomhachd modal. Tha a h-uile tachartas modal air a losgadh aig a’ mhodal fhèin (ie aig an <div class="modal">).

Seòrsa Tachartas	Tuairisgeul
seall.bs.modal	Bidh an tachartas seo a’ losgadh sa bhad nuair `show`a chanar ris an dòigh eisimpleir. Ma thèid adhbhrachadh le cliog, tha an eileamaid a chaidh a bhriogadh ri fhaighinn mar `relatedTarget`sheilbh an tachartais.
air a thaisbeanadh.bs.modal	Thèid an tachartas seo a chuir às nuair a bhios am modal ri fhaicinn don neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh). Ma thèid adhbhrachadh le cliog, tha an eileamaid a chaidh a bhriogadh ri fhaighinn mar `relatedTarget`sheilbh an tachartais.
seiche.bs.modal	Thèid an tachartas seo a losgadh sa bhad nuair a chaidh an `hide`dòigh eisimpleir a ghairm.
falaichte.bs.modal	Thèid an tachartas seo a chuir às nuair a tha am modal deiseil a bhith falaichte bhon neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh).
hidePrevented.bs.modal	Tha an tachartas seo air a losgadh nuair a thèid am modal a shealltainn, tha an cùl-raon aige `static`agus cliog taobh a-muigh a’ mhodail no thèid preas iuchair teicheadh a dhèanamh leis an roghainn meur-chlàr no `data-keyboard`air a shuidheachadh gu `false`.

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