Մոդալ
Օգտագործեք Bootstrap-ի JavaScript մոդալ պլագինը` ձեր կայքում լուսարկղերի, օգտատերերի ծանուցումների կամ ամբողջովին հատուկ բովանդակության համար երկխոսություններ ավելացնելու համար:
Ինչպես է դա աշխատում
Նախքան Bootstrap-ի մոդալ բաղադրիչը սկսելը, համոզվեք, որ կարդացեք հետևյալը, քանի որ մեր մենյուի ընտրանքները վերջերս փոխվել են:
- Մոդալները կառուցված են HTML, CSS և JavaScript-ով: Դրանք տեղադրվում են փաստաթղթի մնացած ամեն ինչի վրա և հեռացնում են ոլորումը,
<body>
որպեսզի փոխարենը ոլորվի մոդալ բովանդակությունը: - Սեղմելով մոդալ «հետին պլանի» վրա, մոդալն ավտոմատ կերպով կփակի:
- Bootstrap-ը միաժամանակ աջակցում է միայն մեկ մոդալ պատուհան: Ներդրված մոդալները չեն աջակցվում, քանի որ մենք կարծում ենք, որ դրանք վատ օգտվողների փորձառություններ են:
- Մոդալները օգտագործում են
position: fixed
, որը երբեմն կարող է մի փոքր առանձնահատուկ լինել դրա մատուցման վերաբերյալ: Հնարավորության դեպքում ձեր մոդալ HTML-ը տեղադրեք վերին մակարդակի վրա՝ այլ տարրերի հնարավոր միջամտությունից խուսափելու համար: Դուք, ամենայն հավանականությամբ, խնդիրներ կունենաք.modal
մեկ այլ ֆիքսված տարրի մեջ տեղադրելու ժամանակ: - Կրկին, շնորհիվ
position: fixed
, կան որոշ նախազգուշացումներ շարժական սարքերում մոդալների օգտագործման հետ կապված: Մանրամասների համար տես մեր դիտարկիչի աջակցության փաստաթղթերը : - Քանի որ HTML5-ը սահմանում է իր իմաստաբանությունը, HTML
autofocus
հատկանիշը որևէ ազդեցություն չունի Bootstrap մոդալներում: Նույն էֆեկտին հասնելու համար օգտագործեք որոշ հատուկ JavaScript.
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
լրատվամիջոցների հարցումից: Տեսեք
մեր մատչելիության փաստաթղթերի կրճատված շարժման բաժինը :
Շարունակեք կարդալ ցուցադրությունների և օգտագործման ուղեցույցների համար:
Օրինակներ
Մոդալ բաղադրիչներ
Ստորև բերված է ստատիկ մոդալ օրինակ (նշանակում է position
, display
որ այն վերացվել է): Ներառված են մոդալ վերնագիր, մոդալ տեքստ (պահանջվում է padding
) և մոդալ ստորագիր (ըստ ցանկության): Մենք խնդրում ենք, որ հնարավորության դեպքում ներառեք մոդալ վերնագրեր՝ մերժման գործողություններով, կամ տրամադրեք այլ բացահայտ մերժման գործողություն:
<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>
Կենդանի ցուցադրություն
Միացնել աշխատանքային մոդալ ցուցադրումը` սեղմելով ստորև նշված կոճակը: Այն կսահի ներքև և կխամրի էջի վերևից:
<!-- 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>
Ստատիկ ֆոն
Երբ հետնաշերտը դրված է ստատիկի վրա, մոդալը չի փակվի դրանից դուրս սեղմելիս: Սեղմեք ստորև բերված կոճակը՝ այն փորձելու համար:
<!-- 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>
Երկար բովանդակության ոլորում
Երբ մոդալները չափազանց երկար են դառնում օգտատիրոջ տեսադաշտի կամ սարքի համար, դրանք պտտվում են էջից անկախ: Փորձեք ստորև ներկայացված ցուցադրությունը՝ տեսնելու, թե ինչ նկատի ունենք:
Կարող եք նաև ստեղծել ոլորվող մոդալ, որը թույլ է տալիս ոլորել մոդալ մարմինը՝ .modal-dialog-scrollable
ավելացնելով .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Ուղղահայաց կենտրոնացված
Ավելացրեք .modal-dialog-centered
մոդալը .modal-dialog
ուղղահայաց կենտրոնացնելու համար:
<!-- 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 և popovers
Անհրաժեշտության դեպքում գործիքների հուշումներն ու փոփովերը կարող են տեղադրվել մոդալների մեջ: Երբ մոդալները փակ են, ցանկացած գործիքի հուշում և ներդիրում ավտոմատ կերպով անջատվում են:
<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>
Օգտագործելով ցանցը
Օգտագործեք Bootstrap ցանցային համակարգը մոդալի .container-fluid
ներսում՝ բույն դնելով .modal-body
. Այնուհետև օգտագործեք սովորական ցանցային համակարգի դասերը, ինչպես ցանկացած այլ վայրում:
<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>
Տարբեր մոդալ բովանդակություն
Ունե՞ք մի քանի կոճակներ, որոնք բոլորն էլ գործարկում են նույն մոդալը՝ մի փոքր տարբեր բովանդակությամբ: Օգտագործեք event.relatedTarget
և HTML data-bs-*
ատրիբուտները ՝ փոփոխելու մոդալի բովանդակությունը՝ կախված նրանից, թե որ կոճակն է սեղմված:
Ստորև ներկայացված է կենդանի ցուցադրություն, որին հաջորդում են HTML և JavaScript օրինակները: Լրացուցիչ տեղեկությունների համար կարդացեք մոդալ իրադարձությունների փաստաթղթերը մանրամասների համար 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
})
Փոխարկել մոդալների միջև
Փոխարկեք մի քանի մոդալների միջև data-bs-target
և data-bs-toggle
ատրիբուտների որոշ խելացի տեղադրմամբ: Օրինակ, դուք կարող եք միացնել գաղտնաբառի վերակայման մոդալը արդեն բաց մուտքի մոդալից: Խնդրում ենք նկատի ունենալ, որ մի քանի մոդալներ չեն կարող բացվել միաժամանակ. այս մեթոդը պարզապես փոխվում է երկու առանձին մոդալների միջև:
<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" data-bs-dismiss="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" data-bs-dismiss="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>
Փոխել անիմացիան
Փոփոխականը $modal-fade-transform
որոշում է փոխակերպման վիճակը .modal-dialog
մինչև մոդալ fade-in անիմացիան, $modal-show-transform
փոփոխականը որոշում է փոխակերպումը .modal-dialog
մոդալ fade-in անիմացիայի վերջում:
Եթե ցանկանում եք, օրինակ, մեծացնելու անիմացիա, կարող եք սահմանել $modal-fade-transform: scale(.8)
:
Հեռացնել անիմացիան
Մոդալների համար, որոնք պարզապես հայտնվում են, այլ ոչ թե խամրում, հեռացրեք .fade
դասը ձեր մոդալ նշումից:
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Դինամիկ բարձրություններ
Եթե մոդալի բարձրությունը փոխվում է, երբ այն բաց է, դուք պետք է զանգահարեք myModal.handleUpdate()
՝ նորից կարգավորելու մոդալի դիրքը, եթե ոլորման տող հայտնվի:
Մատչելիություն
Համոզվեք, որ ավելացրեք aria-labelledby="..."
, հղում կատարելով մոդալ վերնագրին, .modal
. Բացի այդ, դուք կարող եք տալ ձեր մոդալ երկխոսության նկարագրությունը aria-describedby
on-ի հետ .modal
: Նկատի ունեցեք, որ ավելացնելու կարիք չկա, role="dialog"
քանի որ մենք այն արդեն ավելացնում ենք JavaScript-ի միջոցով:
YouTube-ի տեսանյութերի ներկառուցում
YouTube-ի տեսանյութերը մոդալներում զետեղելու համար պահանջվում է լրացուցիչ JavaScript, որը չի Bootstrap-ում՝ ավտոմատ կերպով դադարեցնելու նվագարկումը և ավելին: Լրացուցիչ տեղեկությունների համար տես Stack Overflow-ի այս օգտակար գրառումը :
Ընտրովի չափսեր
Մոդալներն ունեն երեք ընտրովի չափեր, որոնք հասանելի են մոդիֆիկատորների դասերի միջոցով՝ տեղադրելու համար .modal-dialog
. Այս չափերը հայտնվում են որոշակի ընդմիջման կետերում, որպեսզի խուսափեն ավելի նեղ տեսադաշտերի հորիզոնական ոլորման տողերից:
Չափը | Դասարան | Մոդալ առավելագույն լայնություն |
---|---|---|
Փոքր | .modal-sm |
300px |
Կանխադրված | Ոչ ոք | 500px |
Մեծ | .modal-lg |
800px |
Լրացուցիչ մեծ | .modal-xl |
1140px |
Մեր լռելյայն մոդալն առանց փոփոխիչի դասի կազմում է «միջին» չափի մոդալը:
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Ամբողջ էկրանով մոդալ
Մեկ այլ անտեսում է մոդալ բացելու հնարավորությունը, որը ծածկում է օգտվողի տեսադաշտը, որը հասանելի է մոդիֆիկատորների դասերի միջոցով, որոնք տեղադրված են .modal-dialog
.
Դասարան | Հասանելիություն |
---|---|
.modal-fullscreen |
Միշտ |
.modal-fullscreen-sm-down |
Ստորև576px |
.modal-fullscreen-md-down |
Ստորև768px |
.modal-fullscreen-lg-down |
Ստորև992px |
.modal-fullscreen-xl-down |
Ստորև1200px |
.modal-fullscreen-xxl-down |
Ստորև1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Սաս
Փոփոխականներ
$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);
Օղակ
Պատասխանատու լիաէկրան մոդալները ստեղծվում են $breakpoints
քարտեզի և օղակի միջոցով 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);
}
}
}
}
Օգտագործումը
Մոդալ հավելվածը փոխում է ձեր թաքնված բովանդակությունը ըստ պահանջի՝ տվյալների ատրիբուտների կամ JavaScript-ի միջոցով: Այն նաև անտեսում է ոլորման լռելյայն վարքագիծը և առաջացնում է a .modal-backdrop
՝ մոդալից դուրս սեղմելիս ցուցադրված մոդալները հեռացնելու համար սեղմման տարածք տրամադրելու համար:
Տվյալների ատրիբուտների միջոցով
Ակտիվացրեք մոդալ առանց JavaScript գրելու: Սահմանել data-bs-toggle="modal"
կարգավորիչի տարրը, ինչպես կոճակը, a-ի հետ մեկտեղ data-bs-target="#foo"
կամ href="#foo"
թիրախավորել որոշակի մոդալ՝ փոխարկելու համար:
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
JavaScript-ի միջոցով
Ստեղծեք մոդալ JavaScript-ի մեկ տողով.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Ընտրանքներ
Ընտրանքները կարող են փոխանցվել տվյալների ատրիբուտների կամ JavaScript-ի միջոցով: Տվյալների ատրիբուտների համար ավելացրեք տարբերակի անունը data-bs-
, ինչպես data-bs-backdrop=""
.
Անուն | Տիպ | Կանխադրված | Նկարագրություն |
---|---|---|---|
backdrop |
բուլյան կամ լարային'static' |
true |
Ներառում է մոդալ-ֆոնային տարր: Որպես այլընտրանք, նշեք static ֆոն, որը չի փակում մոդալը սեղմելով: |
keyboard |
բուլյան | true |
Փակում է մոդալը, երբ սեղմված է escape ստեղնը |
focus |
բուլյան | true |
Նախաստորագրվելիս կենտրոնանում է մոդալի վրա: |
Մեթոդներ
Ասինխրոն մեթոդներ և անցումներ
Բոլոր API մեթոդները ասինխրոն են և սկսում են անցում : Նրանք վերադառնում են զանգահարողին հենց որ անցումը սկսվի, բայց մինչև այն ավարտվի : Բացի այդ, անցումային բաղադրիչի վրա մեթոդի կանչը անտեսվելու է :
Լրացուցիչ տեղեկությունների համար տես մեր JavaScript փաստաթղթերը :
Անցնելու տարբերակներ
Ակտիվացնում է ձեր բովանդակությունը որպես մոդալ: Ընդունում է ընտրովի տարբերակներ object
:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
փոխարկել
Ձեռքով փոխում է մոդալը: Վերադառնում է զանգահարողին մինչև մոդալն իրականում ցուցադրվել կամ թաքցվել է (այսինքն՝ նախքան իրադարձությունը shown.bs.modal
կամ hidden.bs.modal
իրադարձությունը տեղի ունենալը):
myModal.toggle()
ցուցադրում
Ձեռքով բացում է մոդալ: Վերադառնում է զանգահարողին մինչև մոդալը փաստացի ցուցադրվելը (այսինքն՝ նա��քան shown.bs.modal
իրադարձությունը տեղի ունենալը):
myModal.show()
Բացի այդ, դուք կարող եք փոխանցել DOM տարրը որպես փաստարկ, որը կարող է ստացվել մոդալ իրադարձություններում (որպես relatedTarget
սեփականություն):
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
թաքցնել
Ձեռքով թաքցնում է մոդալը: Վերադառնում է զանգահարողին նախքան մոդալն իրականում թաքցվել է (այսինքն՝ նախքան hidden.bs.modal
իրադարձությունը տեղի ունենալը):
myModal.hide()
handleUpdate
Ձեռքով կարգավորեք մոդալի դիրքը, եթե մոդալի բարձրությունը փոխվում է բաց լինելու ժամանակ (այսինքն՝ ոլորման տող հայտնվելու դեպքում):
myModal.handleUpdate()
տնօրինել
Ոչնչացնում է տարրի մոդալը: (Հեռացնում է DOM տարրի վրա պահված տվյալները)
myModal.dispose()
getInstance
Ստատիկ մեթոդ, որը թույլ է տալիս ստանալ DOM տարրի հետ կապված մոդալ օրինակ
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
Ստատիկ մեթոդ, որը թույլ է տալիս ստանալ DOM տարրի հետ կապված մոդալ օրինակ կամ ստեղծել նորը, եթե այն նախաստորագրված չէ:
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
Իրադարձություններ
Bootstrap-ի մոդալ դասը բացահայտում է մի քանի իրադարձություն՝ մոդալ ֆունկցիոնալությանը միանալու համար: Բոլոր մոդալ իրադարձությունները կրակվում են հենց մոդալի վրա (այսինքն ՝ <div class="modal">
).
Միջոցառման տեսակը | Նկարագրություն |
---|---|
show.bs.modal |
Այս իրադարձությունը գործարկվում է անմիջապես, երբ show կանչվում է օրինակի մեթոդը: Եթե կտտոցով է պայմանավորված, սեղմված տարրը հասանելի է որպես relatedTarget իրադարձության հատկություն: |
shown.bs.modal |
Այս իրադարձությունը գործարկվում է, երբ մոդալը տեսանելի է դառնում օգտատիրոջը (կսպասի CSS անցումների ավարտին): Եթե կտտոցով է պայմանավորված, սեղմված տարրը հասանելի է որպես relatedTarget իրադարձության հատկություն: |
hide.bs.modal |
Այս իրադարձությունը գործարկվում է անմիջապես, երբ hide կանչվում է օրինակի մեթոդը: |
hidden.bs.modal |
Այս իրադարձությունը գործարկվում է, երբ մոդալն ավարտում է օգտագործողից թաքցված լինելը (կսպասի CSS անցումների ավարտին): |
hidePrevented.bs.modal |
Այս իրադարձությունը գործարկվում է, երբ մոդալը ցուցադրվում է, դրա հետնապատկերը գտնվում է, static և մոդալից դուրս սեղմում կամ escape ստեղնը սեղմում է ստեղնաշարի ընտրանքով կամ data-bs-keyboard դրվում է false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})