მოდალური
გამოიყენეთ 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>
ინსტრუმენტები და პოპოვერები
საჭიროების შემთხვევაში, ინსტრუმენტების და პოპოვერების მოთავსება შესაძლებელია მოდალში. როდესაც მოდალები დახურულია, ნებისმიერი ინსტრუმენტების რჩევები და პოპოვერები ასევე ავტომატურად იშლება.
<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">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>
ანიმაციის შეცვლა
$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
შესახებ .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-ის საშუალებით. ის ასევე უგულებელყოფს გადახვევის ნაგულისხმევ ქცევას და აგენერირებს .modal-backdrop
დაწკაპუნების ზონას მოდალის გარეთ დაწკაპუნებისას ნაჩვენები მოდალების გაუქმებისთვის.
მონაცემთა ატრიბუტების მეშვეობით
გადართვა
გაააქტიურეთ მოდალი JavaScript-ის ჩაწერის გარეშე. დაყენებულია data-bs-toggle="modal"
კონტროლერის ელემენტზე, როგორიცაა ღილაკი, data-bs-target="#foo"
ან href="#foo"
მიზნად ისახავს კონკრეტული მოდალის გადართვას.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
გაუქმება
გათავისუფლება შეიძლება მიღწეული იყოს data
ატრიბუტით ღილაკზე მოდალის ფარგლებში, როგორც ეს ნაჩვენებია ქვემოთ:
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
ან მოდალის მიღმა ღილაკზე , data-bs-target
როგორც ნაჩვენებია ქვემოთ:
<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
JavaScript-ის საშუალებით
შექმენით მოდალი JavaScript-ის ერთი ხაზით:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Პარამეტრები
ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-bs-
, როგორც data-bs-backdrop=""
.
სახელი | ტიპი | ნაგულისხმევი | აღწერა |
---|---|---|---|
backdrop |
ლოგიკური ან სტრიქონი'static' |
true |
მოიცავს მოდალური ფონის ელემენტს. ალტერნატიულად, მიუთითეთ static ფონი, რომელიც არ ხურავს მოდალს დაწკაპუნებისას. |
keyboard |
ლოგიკური | true |
ხურავს მოდალს გაქცევის ღილაკის დაჭერისას |
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 და დაწკაპუნება მოდალის გარეთ ან გაქცევის ღილაკის დაჭერა შესრულდება კლავიატურის ოფციით ან data-bs-keyboard დაყენებულია false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})