Modal
Ampiasao ny plugin JavaScript modal Bootstrap mba hanampiana fifanakalozan-dresaka amin'ny tranokalanao ho an'ny boaty jiro, fampandrenesana mpampiasa, na atiny manokana.
Ahoana ny fiasan'izany
Alohan'ny hanombohan'ny singa modal an'ny Bootstrap dia aoka ho azo antoka ny mamaky izao manaraka izao satria niova vao haingana ny safidy sakafo.
- Modals dia namboarina miaraka amin'ny HTML, CSS ary JavaScript. Apetraka eo ambonin'ny zavatra hafa rehetra ao amin'ny antontan-taratasy izy ireo ary esory ny horonan-taratasy
<body>
mba hihodina ny votoatiny modal. - Ny fanindriana ny "backdrop" modal dia hanidy ho azy ny modal.
- Ny Bootstrap dia tsy manohana afa-tsy varavarankely modal iray isaky ny mandeha. Tsy tohanana ny modals nested satria inoanay fa traikefan'ny mpampiasa ratsy izy ireo.
- Modely ampiasaina
position: fixed
, izay mety ho somary manokana momba ny fandikana azy. Raha azo atao dia apetraho amin'ny toerana ambony indrindra ny HTML modal anao mba hisorohana ny mety hisian'ny fitsabahana amin'ny singa hafa. Mety ho sendra olana ianao rehefa manao akany.modal
ao anatin'ny singa raikitra hafa. - Indray mandeha indray, noho ny
position: fixed
, misy fampitandremana sasany momba ny fampiasana modals amin'ny fitaovana finday. Jereo ny antontan-taratasy fanohanana ny navigateur raha mila antsipiriany. - Noho ny fomba famaritan'ny HTML5 ny semantikany, ny
autofocus
toetra HTML dia tsy misy fiantraikany amin'ny modals Bootstrap. Mba hahazoana vokatra mitovy amin'izany, ampiasao JavaScript manokana:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
fangatahan'ny haino aman-jery ny fiantraikan'ity singa ity. Jereo ny
fizarana mihetsika mihena amin'ny antontan-taratasinay momba ny fahafahana miditra .
Tohizo ny famakiana ho an'ny demo sy torolalana fampiasana.
OHATRA
Modal singa
Ity ambany ity ny ohatra static mod (midika hoe azy position
ary display
efa nosoloina). Ao anatin'izany ny lohatenin'ny modal, ny vatana modal (ilaina amin'ny padding
), ary ny tongotra modaly (tsy voatery). Mangataka izahay mba hampidiranao lohapejy modèle miaraka amin'ny hetsika fandroahana raha azo atao, na manome hetsika fandroahana mazava hafa.
<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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Demo mivantana
Ampifamadiho ny demo modal miasa amin'ny fipihana ny bokotra etsy ambany. Hivezivezy midina izy io ary hanjavona avy any an-tampon'ny pejy.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Lavitra static
Rehefa apetraka amin'ny static ny backdrop dia tsy hikatona ny modal rehefa manindry eo ivelany. Kitiho ny bokotra etsy ambany raha hanandrana azy.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
Manorata votoaty lava
Rehefa lasa lava loatra ny modals ho an'ny seranan-tsambo na fitaovana ampiasain'ny mpampiasa, dia mihodina tsy miankina amin'ny pejy mihitsy izy ireo. Andramo ny demo eto ambany hahitana ny tiana holazaina.
Azonao atao ihany koa ny mamorona modal scrollable izay mamela ny scrolling ny vatana modal amin'ny fanampiana .modal-dialog-scrollable
ny .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Mitsangana mitsangana
Ampio .modal-dialog-centered
eo .modal-dialog
afovoany mitsangana ny 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>
Tooltips sy popovers
Ny toro-hevitra momba ny fitaovana sy ny popovers dia azo apetraka ao anaty modals raha ilaina. Rehefa mihidy ny modals dia esorina ho azy koa izay toro-lalana sy popover ao anatiny.
<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-bs-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>
Mampiasa ny grid
Ampiasao ny rafitra grid Bootstrap ao anaty modal amin'ny alàlan'ny fanaingoana .container-fluid
ao anaty .modal-body
. Avy eo, ampiasao ny kilasy rafitra rafitra ara-dalàna toy ny ataonao any amin'ny toerana hafa.
<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 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
<div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-6 ms-auto">.col-md-6 .ms-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>
Miovaova ny votoatin'ny modal
Manana bokotra maromaro izay miteraka mody mitovy amin'ny atiny hafa kely? Mampiasà toetraevent.relatedTarget
sy HTMLdata-bs-*
mba hanovana ny votoatin'ny modal miankina amin'ny bokotra izay voakitika.
Ity ambany ity ny demo mivantana arahin'ny ohatra HTML sy JavaScript. Raha mila fanazavana fanampiny dia vakio ny doka hetsika modal raha mila fanazavana momba ny relatedTarget
.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<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-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
// Button that triggered the modal
var button = event.relatedTarget
// Extract info from data-bs-* attributes
var recipient = button.getAttribute('data-bs-whatever')
// If necessary, you could initiate an AJAX request here
// and then do the updating in a callback.
//
// Update the modal's content.
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')
modalTitle.textContent = 'New message to ' + recipient
modalBodyInput.value = recipient
})
Hifamadika eo anelanelan'ny modals
Mifamadika eo anelanelan'ny modals marobe miaraka amin'ny fametrahana tsara ny data-bs-target
sy ny data-bs-toggle
toetra. Ohatra, azonao atao ny manova ny tenimiafina reset modal avy ao anatin'ny efa misokatra sign in modal. Azafady, mariho fa tsy afaka misokatra amin'ny fotoana iray ny modals maro - ity fomba ity dia mifamadika fotsiny eo anelanelan'ny modals roa misaraka.
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Show a second modal and hide this one with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hide this modal and show the first with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
</div>
</div>
</div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
Hanova ny animation
Ny $modal-fade-transform
fari-piainana no mamaritra ny toetry ny fiovan'ny .modal-dialog
alohan'ny sarimiaina fade-in modal, ny $modal-show-transform
fari-piainana no mamaritra ny fiovan'ny .modal-dialog
amin'ny faran'ny sarimiaina fade-in modal.
Raha tianao ohatra ny animation zoom-in dia azonao atao ny mametraka $modal-fade-transform: scale(.8)
.
Esory ny animation
Ho an'ny modals izay miseho fotsiny fa tsy manjavona ho jerena, esory ny .fade
kilasy amin'ny marika modal anao.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Haavo mavitrika
Raha miova ny haavon'ny modal iray rehefa misokatra, dia tokony hiantso ianao myModal.handleUpdate()
hanitsy ny toeran'ny modal raha sendra misy scrollbar.
Accessibility
Ataovy azo antoka ny manampy aria-labelledby="..."
, manondro ny lohatenin'ny modal, ny .modal
. Ho fanampin'izany, azonao atao ny manome famaritana momba ny fifanakalozan-dresakao miaraka amin'ny aria-describedby
on .modal
. Mariho fa tsy mila manampy ianao role="dialog"
satria efa nampianay tamin'ny JavaScript.
Mampiditra horonan-tsary YouTube
Ny fametahana horonan-tsary YouTube amin'ny modals dia mitaky JavaScript fanampiny tsy ao amin'ny Bootstrap mba hampijanonana ho azy ny playback sy ny maro hafa. Jereo ity lahatsoratra Stack Overflow mahasoa ity raha mila fanazavana fanampiny.
Habe azo atao
Modals dia manana habe telo azo atao, azo alaina amin'ny alàlan'ny kilasy modifier hapetraka amin'ny .modal-dialog
. Ireo habe ireo dia miditra amin'ny toerana fiatoana sasany mba hialana amin'ny scrollbar marindrano amin'ny seranana tery kokoa.
Size | KILASY | Modal max-width |
---|---|---|
KELY | .modal-sm |
300px |
toerana misy anao | tsy misy | 500px |
ankamaroan'ireo | .modal-lg |
800px |
Extra large | .modal-xl |
1140px |
Ny maodely mahazatra antsika tsy misy kilasy modifier dia ny "mode" habe.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Modal ecran feno
Ny fanafoanana iray hafa dia ny safidy hanokafana modal iray izay mandrakotra ny fijerin'ny mpampiasa, azo alaina amin'ny alàlan'ny kilasy modifier izay apetraka amin'ny .modal-dialog
.
KILASY | Availability |
---|---|
.modal-fullscreen |
foana |
.modal-fullscreen-sm-down |
ambany576px |
.modal-fullscreen-md-down |
ambany768px |
.modal-fullscreen-lg-down |
ambany992px |
.modal-fullscreen-xl-down |
ambany1200px |
.modal-fullscreen-xxl-down |
ambany1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Sass
hiovaova
$modal-inner-padding: $spacer;
$modal-footer-margin-between: .5rem;
$modal-dialog-margin: .5rem;
$modal-dialog-margin-y-sm-up: 1.75rem;
$modal-title-line-height: $line-height-base;
$modal-content-color: null;
$modal-content-bg: $white;
$modal-content-border-color: rgba($black, .2);
$modal-content-border-width: $border-width;
$modal-content-border-radius: $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs: $box-shadow-sm;
$modal-content-box-shadow-sm-up: $box-shadow;
$modal-backdrop-bg: $black;
$modal-backdrop-opacity: .5;
$modal-header-border-color: $border-color;
$modal-footer-border-color: $modal-header-border-color;
$modal-header-border-width: $modal-content-border-width;
$modal-footer-border-width: $modal-header-border-width;
$modal-header-padding-y: $modal-inner-padding;
$modal-header-padding-x: $modal-inner-padding;
$modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility
$modal-sm: 300px;
$modal-md: 500px;
$modal-lg: 800px;
$modal-xl: 1140px;
$modal-fade-transform: translate(0, -50px);
$modal-show-transform: none;
$modal-transition: transform .3s ease-out;
$modal-scale-transform: scale(1.02);
manome fitoerana
Ny modals ecran feno mamaly dia avoaka amin'ny alàlan'ny $breakpoints
sari-tany sy ny loop in scss/_modal.scss
.
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
$postfix: if($infix != "", $infix + "-down", "");
@include media-breakpoint-down($breakpoint) {
.modal-fullscreen#{$postfix} {
width: 100vw;
max-width: none;
height: 100%;
margin: 0;
.modal-content {
height: 100%;
border: 0;
@include border-radius(0);
}
.modal-header {
@include border-radius(0);
}
.modal-body {
overflow-y: auto;
}
.modal-footer {
@include border-radius(0);
}
}
}
}
Fampiasana
Ny plugin modal dia manova ny atiny miafina amin'ny fangatahana, amin'ny alàlan'ny toetran'ny data na JavaScript. Izy io koa dia manafoana ny fihetsika mikodiarana mahazatra ary mamorona .modal-backdrop
faritra kitiho hanilihana ny modals aseho rehefa manindry ivelan'ny modal.
Amin'ny alàlan'ny data attributes
Toggle
Ampidiro modal iray tsy manoratra JavaScript. Apetraho data-bs-toggle="modal"
eo amin'ny singa mpanara-maso, toy ny bokotra iray, miaraka amin'ny data-bs-target="#foo"
na href="#foo"
hikendry mody iray manokana hivezivezy.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
handroaka
Ny fandroahana dia azo atao amin'ny data
toetra amin'ny bokotra iray ao anatin'ny modal araka ny aseho eto ambany:
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
na amin'ny bokotra ivelan'ny modal amin'ny fampiasana ny data-bs-target
aseho eto ambany:
<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Amin'ny JavaScript
Mamorona modal miaraka amin'ny andalana tokana amin'ny JavaScript:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
FANDIKANA
Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-bs-
, toy ny ao amin'ny data-bs-backdrop=""
.
Anarana | Type | toerana misy anao | Description |
---|---|---|---|
backdrop |
boolean na ny tady'static' |
true |
Ahitana singa modal-backdrop. Raha tsy izany, manendry static ny backdrop izay tsy manidy ny modal amin'ny tsindry. |
keyboard |
boolean | true |
Manakatona ny modal rehefa tsindriana ny fanalahidin'ny escape |
focus |
boolean | true |
Mametraka ny fifantohana amin'ny modal rehefa natomboka. |
fomba
Fomba sy fifindrana asynchronous
Ny fomba API rehetra dia asynchronous ary manomboka tetezamita . Miverina any amin'ny mpiantso izy ireo raha vao manomboka ny tetezamita fa alohan'ny hifarana . Ho fanampin'izany, tsy hojerena ny fiantsoana fomba iray amin'ny singa tetezamita .
Jereo ny antontan-taratasintsika JavaScript raha mila fanazavana fanampiny .
Safidy mandalo
Mampihetsika ny atiny ho toy ny modal. Manaiky safidy azo atao object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
mifamadika
Manova fomba tanana iray. Miverina any amin'ny mpiantso alohan'ny naseho na nafenina ny modal (izany hoe alohan'ny nitrangan'ny shown.bs.modal
na hidden.bs.modal
hetsika).
myModal.toggle()
FAMPISEHOANA
Manokatra modal amin'ny tanana. Miverina any amin'ny mpiantso alohan'ny tena naseho ny modal (izany hoe alohan'ny shown.bs.modal
nitrangan'ny hetsika).
myModal.show()
Azonao atao ihany koa ny mandefa singa DOM ho tohan-kevitra azo raisina amin'ny hetsika modal (toy ny relatedTarget
fananana).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
afeno ny
Manafina modal iray amin'ny tanana. Miverina any amin'ny mpiantso alohan'ny tena nafenina ny modal (izany hoe alohan'ny hidden.bs.modal
nitrangan'ny hetsika).
myModal.hide()
handleUpdate
Ampifanaraho amin'ny tanana ny toeran'ny modal raha miova ny haavon'ny modal iray rehefa misokatra (izany hoe raha misy scrollbar miseho).
myModal.handleUpdate()
Ario
Manimba ny modalin'ny singa iray. (Esory ny angona voatahiry amin'ny singa DOM)
myModal.dispose()
getInstance
Fomba static izay ahafahanao mahazo ny ohatra modal mifandray amin'ny singa DOM
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
Fomba static izay ahafahanao mahazo ny ohatra modal mifandray amin'ny singa DOM, na mamorona vaovao raha toa ka tsy natomboka izany
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
zava-mitranga
Ny kilasy modal an'ny Bootstrap dia mampiharihary hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fiasa modal. Ny hetsika modal rehetra dia alefa amin'ny modal mihitsy (izany hoe ao amin'ny <div class="modal">
).
Karazana hetsika | Description |
---|---|
show.bs.modal |
Mirehitra avy hatrany ity hetsika ity rehefa show antsoina ny fomba fiasa. Raha vokatry ny tsindry iray dia azo alaina ho relatedTarget fananan'ny hetsika ny singa voakitika. |
shown.bs.modal |
Ity hetsika ity dia voaroaka rehefa natao ho hitan'ny mpampiasa ny modal (hiandry ny fifindran'ny CSS ho vita). Raha vokatry ny tsindry iray dia azo alaina ho relatedTarget fananan'ny hetsika ny singa voakitika. |
hide.bs.modal |
Ity hetsika ity dia alefa avy hatrany rehefa hide nantsoina ny fomba fiasa. |
hidden.bs.modal |
Voaroaka ity hetsika ity rehefa vita ny nafenina tamin'ny mpampiasa ny modal (hiandry ny famitana ny fifindrana CSS). |
hidePrevented.bs.modal |
Ity hetsika ity dia alefa rehefa aseho ny modal, ny lamosiny dia static ary ny kitiho ivelan'ny modal na ny fanerena fanendry fanendry dia atao miaraka amin'ny safidy fitendry na data-bs-keyboard apetraka amin'ny false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})