ម៉ូឌុល
ប្រើកម្មវិធីជំនួយម៉ូឌុល JavaScript របស់ Bootstrap ដើម្បីបន្ថែមប្រអប់ទៅកាន់គេហទំព័ររបស់អ្នកសម្រាប់ប្រអប់ពន្លឺ ការជូនដំណឹងរបស់អ្នកប្រើ ឬខ្លឹមសារផ្ទាល់ខ្លួនទាំងស្រុង។
របៀបដែលវាដំណើរការ
មុនពេលចាប់ផ្តើមជាមួយនឹងសមាសភាគម៉ូឌុលរបស់ Bootstrap ត្រូវប្រាកដថាបានអានខាងក្រោមព្រោះជម្រើសម៉ឺនុយរបស់យើងបានផ្លាស់ប្តូរនាពេលថ្មីៗនេះ។
- Modals ត្រូវបានបង្កើតជាមួយ HTML, CSS, និង JavaScript។ ពួកវាត្រូវបានដាក់នៅលើអ្វីផ្សេងទៀតនៅក្នុងឯកសារ ហើយដករមូរចេញពី
<body>
ដើម្បីឱ្យមាតិការមូរជំនួសវិញ។ - ការចុចលើ "ផ្ទាំងខាងក្រោយ" ម៉ូឌុលនឹងបិទម៉ូឌុលដោយស្វ័យប្រវត្តិ។
- Bootstrap គាំទ្រតែបង្អួចម៉ូឌុលមួយក្នុងពេលតែមួយ។ ម៉ូឌុលដែលលាក់មិនត្រូវបានគាំទ្រទេ ដោយសារយើងជឿថាពួកវាជាបទពិសោធន៍អ្នកប្រើប្រាស់មិនល្អ។
- ម៉ូឌុលប្រើប្រាស់
position: fixed
ដែលជួនកាលអាចពិសេសបន្តិចអំពីការបង្ហាញរបស់វា។ នៅពេលណាដែលអាចធ្វើទៅបាន សូមដាក់ម៉ូឌុល HTML របស់អ្នកនៅក្នុងទីតាំងកម្រិតកំពូល ដើម្បីជៀសវាងការជ្រៀតជ្រែកដែលមានសក្តានុពលពីធាតុផ្សេងទៀត។ អ្នកទំនងជានឹងមានបញ្ហានៅពេលដាក់សំបុក.modal
នៅក្នុងធាតុថេរមួយផ្សេងទៀត។ - ជាថ្មីម្តងទៀត ដោយសារតែ
position: fixed
មានការព្រមានមួយចំនួនជាមួយនឹងការប្រើម៉ូឌុលនៅលើឧបករណ៍ចល័ត។ សូមមើលឯកសារជំនួយកម្មវិធីរុករករបស់យើង សម្រាប់ព័ត៌មានលម្អិត។ - ដោយសាររបៀបដែល HTML5 កំណត់អត្ថន័យរបស់វា គុណលក្ខណៈ
autofocus
HTML មិនមានឥទ្ធិពលនៅក្នុងម៉ូឌុល 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
ត្រូវបានបដិសេធ) រួមបញ្ចូលទាំងបឋមកថា modal, modal body (required for padding
) និង modal footer (ស្រេចចិត្ត)។ យើងស្នើឱ្យអ្នកបញ្ចូលបឋមកថាម៉ូឌុលជាមួយនឹងសកម្មភាពច្រានចោលនៅពេលណាដែលអាចធ្វើទៅបាន ឬផ្តល់សកម្មភាពច្រានចោលជាក់ស្តែងផ្សេងទៀត។
<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>
រមូរមាតិកាវែង
នៅពេលដែល modals វែងពេកសម្រាប់ viewport ឬឧបករណ៍របស់អ្នកប្រើ ពួកវារមូរដោយឯករាជ្យពីទំព័រខ្លួនឯង។ សាកល្បងការបង្ហាញខាងក្រោមដើម្បីមើលថាតើយើងមានន័យយ៉ាងណា។
អ្នកក៏អាចបង្កើតម៉ូឌុលដែលអាចរមូរបានដែលអនុញ្ញាតឱ្យរមូរតួម៉ូឌុលដោយបន្ថែម .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
និង គុណលក្ខណៈ HTMLdata-bs-*
ដើម្បីផ្លាស់ប្តូរមាតិកានៃម៉ូឌុល អាស្រ័យលើប៊ូតុងមួយណាដែលត្រូវចុច។
ខាងក្រោមនេះគឺជាការបង្ហាញផ្ទាល់តាមពីក្រោយដោយឧទាហរណ៍ HTML និង JavaScript។ សម្រាប់ព័ត៌មានបន្ថែម សូម អានឯកសារព្រឹត្តិការណ៍ modal សម្រាប់ព័ត៌មានលម្អិតនៅលើ 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
ចលនារំសាយតាមម៉ូឌុល $modal-show-transform
អថេរកំណត់ការបំប្លែងនៃ .modal-dialog
នៅចុងបញ្ចប់នៃចលនារំសាយតាមម៉ូឌុល។
ប្រសិនបើអ្នកចង់បានឧទាហរណ៍ ចលនាពង្រីក អ្នកអាចកំណត់ $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 ។ វាក៏បដិសេធឥរិយាបថរមូរលំនាំដើម និងបង្កើត a .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>
តាមរយៈ 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 |
ដាក់ការផ្តោតទៅលើ modal នៅពេលដែលបានចាប់ផ្តើម។ |
វិធីសាស្រ្ត
វិធីសាស្រ្ត និងការផ្លាស់ប្តូរអសមកាល
វិធីសាស្រ្ត API ទាំងអស់គឺ អសមកាល ហើយចាប់ផ្តើមការ ផ្លាស់ប្តូរ ។ ពួកគេត្រឡប់ទៅអ្នកហៅចូលវិញភ្លាមៗ នៅពេលដែលការផ្លាស់ប្តូរត្រូវបានចាប់ផ្តើម ប៉ុន្តែ មុនពេលវាបញ្ចប់ ។ លើសពីនេះទៀត ការហៅតាមវិធីសាស្ត្រលើ សមាសភាគអន្តរកាលនឹងត្រូវបានមិនអើពើ ។
ជម្រើសឆ្លងកាត់
ធ្វើឱ្យមាតិការបស់អ្នកសកម្មជាគំរូ។ ទទួលយកជម្រើសស្រេចចិត្ត 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 ជាអាគុយម៉ង់ដែលអាចត្រូវបានទទួលនៅក្នុងព្រឹត្តិការណ៍ modal (ជា 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
ព្រឹត្តិការណ៍
ថ្នាក់ modal របស់ Bootstrap បង្ហាញព្រឹត្តិការណ៍មួយចំនួនសម្រាប់ការភ្ជាប់ចូលទៅក្នុងមុខងារ modal ។ ព្រឹត្តិការណ៍ modal ទាំងអស់ត្រូវបានបាញ់នៅ modal ខ្លួនវាផ្ទាល់ (ឧទាហរណ៍នៅ <div class="modal">
) ។
ប្រភេទព្រឹត្តិការណ៍ | ការពិពណ៌នា |
---|---|
show.bs.modal |
ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ នៅពេលដែល show វិធីសាស្ត្រ instance ត្រូវបានហៅ។ ប្រសិនបើបណ្តាលមកពីការចុច ធាតុដែលបានចុចគឺអាចប្រើបានជា 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...
})