Modali
Gwiritsani ntchito pulogalamu yowonjezera ya JavaScript ya Bootstrap kuti muwonjezere zokambirana patsamba lanu la mabokosi opepuka, zidziwitso za ogwiritsa ntchito, kapena zomwe mumakonda.
Momwe zimagwirira ntchito
Musanayambe ndi gawo la Bootstrap, onetsetsani kuti mwawerenga zotsatirazi popeza zosankha zathu zasintha posachedwa.
- Ma modals amapangidwa ndi HTML, CSS, ndi JavaScript. Iwo ali pamwamba pa china chirichonse mu chikalatacho ndi kuchotsa mpukutu
<body>
kuti modal zolembedwa mipukutu m'malo. - Kusindikiza pa modal "backdrop" kudzatseka modal.
- Bootstrap imathandizira zenera limodzi lokha nthawi imodzi. Makhalidwe a Nested sagwiritsidwa ntchito chifukwa timakhulupirira kuti sagwiritsa ntchito bwino.
- Ma Modals amagwiritsa ntchito
position: fixed
, zomwe nthawi zina zimatha kukhala zodziwika bwino pakumasulira kwake. Ngati n'kotheka, ikani HTML yanu pamalo apamwamba kuti musasokonezedwe ndi zinthu zina. Mutha kukumana ndi zovuta mukamanga zisa.modal
mkati mwa chinthu china chokhazikika. - Apanso, chifukwa cha
position: fixed
, pali machenjezo ogwiritsira ntchito ma modals pazida zam'manja. Onani zolemba zathu zothandizira msakatuli kuti mumve zambiri. - Chifukwa cha momwe HTML5 imatanthauzira semantics yake, mawonekedwe a
autofocus
HTML alibe mphamvu mu ma modals a Bootstrap. Kuti mukwaniritse zomwezo, gwiritsani ntchito JavaScript yokhazikika:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
prefers-reduced-motion
funso la media. Onani gawo
lochepetsedwa la zolemba zathu zofikira .
Pitilizani kuwerenga ma demo ndi malangizo ogwiritsira ntchito.
Zitsanzo
Zigawo za modal
Pansipa pali static modal chitsanzo (kutanthauza zake position
ndipo display
zasinthidwa). Kuphatikizidwa ndi mutu wa modal, thupi la modal (lofunikira padding
) ndi modal footer (posankha). Tikukupemphani kuti muphatikizepo mitu ya ma modal yokhala ndi zochita zochotsa ngati kuli kotheka, kapena kupereka china chochotsa.
<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">×</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>
Chiwonetsero chamoyo
Sinthani mawonekedwe ogwirira ntchito podina batani pansipa. Idzatsika ndikuzimiririka kuchokera pamwamba pa tsamba.
<!-- 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">×</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>
Zosasunthika
Kumbuyo kukakhala static, modal sitseka mukadina kunja kwake. Dinani batani pansipa kuti muyese.
<!-- 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">×</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>
Kusuntha zinthu zazitali
Ma mods akakhala ataliatali kwambiri kuti ayang'ane ndi wogwiritsa ntchito kapena chipangizo, amasuntha mosadalira tsambalo. Yesani chiwonetsero pansipa kuti muwone zomwe tikutanthauza.
Mukhozanso kupanga modal scrollable yomwe imalola kusuntha thupi la modal powonjezera .modal-dialog-scrollable
ku .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Chokhazikika pakati
Onjezani .modal-dialog-centered
ku .modal-dialog
molunjika pakati pa modali.
<!-- 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 ndi popovers
Zida ndi ma popovers zitha kuyikidwa m'ma modal ngati pakufunika . Ma modals akatsekedwa, zida zilizonse ndi ma popovers mkati mwake amachotsedwanso.
<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>
Kugwiritsa ntchito grid
Gwiritsani ntchito dongosolo la grid ya Bootstrap mkati mwa modal pomanga zisa .container-fluid
mkati mwa .modal-body
. Kenako, gwiritsani ntchito makalasi amtundu wa grid monga momwe mungachitire kwina kulikonse.
<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>
Mitundu yosiyanasiyana ya modal
Muli ndi mabatani ambiri omwe amayambitsa modali yofanana ndi zomwe zili zosiyana pang'ono? Gwiritsani ntchito event.relatedTarget
ndi mawonekedwe a HTMLdata-*
(mwina kudzera pa jQuery ) kuti musinthe zomwe zili mu modal kutengera batani lomwe ladina.
Pansipa pali chiwonetsero chamoyo chotsatiridwa ndi chitsanzo cha HTML ndi JavaScript. Kuti mumve zambiri, werengani zolemba zamodal zochitika kuti mumve zambiri 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">×</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)
})
Sinthani makanema ojambula
Kusinthaku $modal-fade-transform
kumatsimikizira kusintha kwa .modal-dialog
makanema ojambula a modal fade-in, $modal-show-transform
kusintha kumatsimikizira kusintha kwa .modal-dialog
kumapeto kwa makanema ojambula pa modal fade-in.
Ngati mukufuna mwachitsanzo makanema ojambula pazithunzi, mutha kukhazikitsa $modal-fade-transform: scale(.8)
.
Chotsani makanema ojambula
Kwa ma mods omwe amangowoneka m'malo mozimiririka kuti awoneke, chotsani .fade
kalasiyo pazolemba zanu.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Matali amphamvu
Ngati kutalika kwa modal kumasintha pamene ili yotseguka, muyenera kuyimba $('#myModal').modal('handleUpdate')
kuti mukonzenso malo a modal ngati scrollbar ikuwoneka.
Kufikika
Onetsetsani kuti muwonjezere aria-labelledby="..."
, kutengera mutu wa modal, ku .modal
. Kuphatikiza apo, mutha kufotokoza za dialog yanu ya modal ndi aria-describedby
pa .modal
. Dziwani kuti simukuyenera kuwonjezera role="dialog"
popeza tidawonjezera kale kudzera pa JavaScript.
Kuyika makanema a YouTube
Kuyika makanema a YouTube mu ma modals kumafuna JavaScript yowonjezera osati mu Bootstrap kuti asiye kusewera ndi zina zambiri. Onani positi yothandiza ya Stack Overflow kuti mumve zambiri.
Zosankha zazikulu
Ma Modals ali ndi masaizi atatu osasankha, omwe amapezeka kudzera pamagulu osintha kuti ayikidwe pa .modal-dialog
. Kukula uku kumayambira pazipata zina kuti mupewe zopingasa zopingasa pamawonekedwe ocheperako.
Kukula | Kalasi | Modal max-width |
---|---|---|
Wamng'ono | .modal-sm |
300px |
Zosasintha | Palibe | 500px |
Chachikulu | .modal-lg |
800px |
Chachikulu kwambiri | .modal-xl |
1140px |
Modal yathu yosasinthika yopanda kalasi yosinthira imapanga "zapakatikati" kukula kwake.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Kugwiritsa ntchito
Pulogalamu yowonjezera ya modal imasintha zinthu zanu zobisika mukafuna, kudzera pa data kapena JavaScript. Imawonjezeranso .modal-open
kusokoneza machitidwe <body>
opukutira osasintha ndikupanga a .modal-backdrop
kuti apereke malo odina kuti muchotse ma modal owonetsedwa mukadina kunja kwa modal.
Kudzera muzochita za data
Yambitsani modali osalemba JavaScript. Khazikitsani data-toggle="modal"
chinthu chowongolera, ngati batani, limodzi ndi data-target="#foo"
kapena href="#foo"
kutsata njira inayake kuti musinthe.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
Kudzera pa JavaScript
Imbani modal yokhala ndi id myModal
yokhala ndi mzere umodzi wa JavaScript:
$('#myModal').modal(options)
Zosankha
Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-
, monga mu data-backdrop=""
.
Dzina | Mtundu | Zosasintha | Kufotokozera |
---|---|---|---|
kumbuyo | boolean kapena chingwe'static' |
zoona | Mulinso modal-backdrop element. Kapenanso, tchulani static zakumbuyo zomwe sizitseka moduli mukadina. |
kiyibodi | boolean | zoona | Amatseka modal pamene kiyi yothawa ikanikizidwa |
kuganizira | boolean | zoona | Imayika chidwi pa modal ikakhazikitsidwa. |
chiwonetsero | boolean | zoona | Imawonetsa modali ikakhazikitsidwa. |
Njira
Asynchronous njira ndi kusintha
Njira zonse za API ndizosasinthika ndipo zimayamba kusintha . Amabwerera kwa woyimbayo atangoyamba kusintha koma asanathe . Kuonjezera apo, kuyitana kwa njira pa gawo losintha kudzanyalanyazidwa .
.modal(options)
Imatsegula zomwe zili ngati modal. Imavomereza zomwe mungachite object
.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
Imatembenuza pamanja modali. Imabwereranso kwa woyimba foniyo isanasonyezedwe kapena kubisidwa (ie zisanachitike shown.bs.modal
kapena hidden.bs.modal
chochitikacho).
$('#myModal').modal('toggle')
.modal('show')
Pamanja amatsegula modali. Imabwereranso kwa woyimba foniyo isanasonyezedwe (ie zisanachitike shown.bs.modal
).
$('#myModal').modal('show')
.modal('hide')
Amabisa pamanja modali. Imabwereranso kwa woyimbira foniyo isanabisike (ie zisanachitike hidden.bs.modal
).
$('#myModal').modal('hide')
.modal('handleUpdate')
Sinthani pamanja malo a modal ngati kutalika kwa modali kukusintha pamene ili lotseguka (mwachitsanzo, ngati mpukutu utawonekera).
$('#myModal').modal('handleUpdate')
.modal('dispose')
Imawononga modal ya chinthu.
Zochitika
Kalasi ya modal ya Bootstrap imawulula zochitika zingapo kuti zigwirizane ndi machitidwe a modal. Zochitika zonse za modal zimachotsedwa pa modal yokha (ie pa <div class="modal">
).
Mtundu wa Chochitika | Kufotokozera |
---|---|
show.bs.modal | Chochitika ichi chimayaka nthawi yomweyo show njira yachitsanzo itayitanidwa. Ngati chifukwa cha kudina, chinthu chomwe chadina chimapezeka ngati relatedTarget katundu wa chochitikacho. |
zowonetsedwa.bs.modal | Chochitikachi chimachotsedwa pamene modal yawonetsedwa kwa wogwiritsa ntchito (idzadikirira kuti kusintha kwa CSS kumalize). Ngati chifukwa cha kudina, chinthu chomwe chadina chimapezeka ngati relatedTarget katundu wa chochitikacho. |
hide.bs.modal | Chochitika ichi chimachotsedwa nthawi yomweyo pamene hide njira yachitsanzo yayitanidwa. |
zobisika.bs.modal | Chochitikachi chimachotsedwa pamene modal yatha kubisidwa kwa wogwiritsa ntchito (idikira kuti kusintha kwa CSS kumalize). |
hidePrevented.bs.modal | Chochitikachi chimathamangitsidwa pamene modal ikuwonetsedwa, kumbuyo kwake static ndikudina kunja kwa modal kapena makina othawa amachitidwa ndi njira ya kiyibodi kapena data-keyboard kukhazikitsidwa kwa false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})