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.modal
ka 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
autofocus
HTML 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')
})
prefers-reduced-motion
potš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
Dikarolo tša Modal
Ka tlase ke mohlala wa modal wa go se fetogeposition
(go ra gore wa yona le display
ba 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">
<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>
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" 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>
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" 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>
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.
O ka hlama gape le modal ye e ka kgokologago yeo e dumelelago go sepelasepela mmele wa modal ka go tlaleletša .modal-dialog-scrollable
go .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
E tsepame thwii
Oketša .modal-dialog-centered
go .modal-dialog
go thwii bogareng bja modal.
<!-- 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>
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-fluid
ka 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.relatedTarget
le 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" 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)
})
Fetola ditshwantsho tse di phelang
The feto- $modal-fade-transform
fetohang e laola boemo ba fetola ba .modal-dialog
pele ho modal fifala-ka animatsioon, $modal-show-transform
phetoho e laola phetoho ea .modal-dialog
qetellong 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 .fade
sehlopha go tšwa go leswao la gago la modal.
<div class="modal" tabindex="-1" 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 aria-labelledby="..."
, o šupa sehlogo sa modal, go .modal
. Go tlaleletša, o ka fa tlhalošo ya poledišano ya gago ya modal ka aria-describedby
go .modal
. Hlokomela gore ga go nyakege gore o tlaleletše role="dialog"
ka ge re šetše re e tlaleletša ka JavaScript.
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”.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</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-open
go <body>
go tloša boitshwaro bja go kgokološa bja go se fetoge gomme e tšweletša a .modal-backdrop
go 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 myModal
ka 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 static bakeng sa backdrop yeo e sa tswalelego modal ka go klika. |
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.modal
goba hidden.bs.modal
e 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.modal
tiragalo 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.modal
tiragalo 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 show mokgwa wa mohlala o bitšwa. Ge e bakwa ke go klika, elemente ye e klikilwego e hwetšagala bjalo ka relatedTarget thepa 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 relatedTarget thepa ya tiragalo. |
pata.bs.modal | Tiragalo ye e thuntšhwa ka pela ge hide mokgwa 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, mokokotlo wa yona ke static gomme go klika ka ntle ga modal goba go tobetša senotlelo sa go tšhaba go dirwa ka kgetho ya khiiboto goba data-keyboard e beakantšwe go false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})