ម៉ូឌុល
ប្រើកម្មវិធីជំនួយម៉ូឌុល JavaScript របស់ Bootstrap ដើម្បីបន្ថែមប្រអប់ទៅកាន់គេហទំព័ររបស់អ្នកសម្រាប់ប្រអប់ពន្លឺ ការជូនដំណឹងរបស់អ្នកប្រើ ឬខ្លឹមសារផ្ទាល់ខ្លួនទាំងស្រុង។
មុនពេលចាប់ផ្តើមជាមួយនឹងសមាសភាគម៉ូឌុលរបស់ Bootstrap ត្រូវប្រាកដថាបានអានខាងក្រោមព្រោះជម្រើសម៉ឺនុយរបស់យើងបានផ្លាស់ប្តូរនាពេលថ្មីៗនេះ។
- Modals ត្រូវបានបង្កើតជាមួយ HTML, CSS, និង JavaScript។ ពួកវាត្រូវបានដាក់នៅលើអ្វីផ្សេងទៀតនៅក្នុងឯកសារ ហើយដករមូរចេញពី
<body>
ដើម្បីឱ្យមាតិការមូរជំនួសវិញ។ - ការចុចលើ "ផ្ទាំងខាងក្រោយ" ម៉ូឌុលនឹងបិទម៉ូឌុលដោយស្វ័យប្រវត្តិ។
- Bootstrap គាំទ្រតែបង្អួចម៉ូឌុលមួយក្នុងពេលតែមួយ។ ម៉ូឌុលដែលលាក់មិនត្រូវបានគាំទ្រទេ ដោយសារយើងជឿថាពួកវាជាបទពិសោធន៍អ្នកប្រើប្រាស់មិនល្អ។
- ម៉ូឌុលប្រើប្រាស់
position: fixed
ដែលជួនកាលអាចពិសេសបន្តិចអំពីការបង្ហាញរបស់វា។ នៅពេលណាដែលអាចធ្វើទៅបាន សូមដាក់ម៉ូឌុល HTML របស់អ្នកនៅក្នុងទីតាំងកម្រិតកំពូល ដើម្បីជៀសវាងការជ្រៀតជ្រែកដែលមានសក្តានុពលពីធាតុផ្សេងទៀត។ អ្នកទំនងជានឹងមានបញ្ហានៅពេលដាក់សំបុក.modal
នៅក្នុងធាតុថេរមួយផ្សេងទៀត។ - ជាថ្មីម្តងទៀត ដោយសារតែ
position: fixed
មានការព្រមានមួយចំនួនជាមួយនឹងការប្រើម៉ូឌុលនៅលើឧបករណ៍ចល័ត។ សូមមើលឯកសារជំនួយកម្មវិធីរុករករបស់យើង សម្រាប់ព័ត៌មានលម្អិត។ - ដោយសាររបៀបដែល HTML5 កំណត់អត្ថន័យរបស់វា គុណលក្ខណៈ
autofocus
HTML មិនមានឥទ្ធិពលនៅក្នុងម៉ូឌុល Bootstrap ទេ។ ដើម្បីសម្រេចបាននូវប្រសិទ្ធិភាពដូចគ្នា សូមប្រើ JavaScript ផ្ទាល់ខ្លួនមួយចំនួន៖
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
បន្តអានសម្រាប់ការបង្ហាញ និងការណែនាំអំពីការប្រើប្រាស់។
ខាងក្រោមនេះគឺជា ឧទាហរណ៍គំរូ ឋិតិវន្តposition
(មានន័យថាវា និង display
ត្រូវបានបដិសេធ) រួមបញ្ចូលទាំងបឋមកថា modal, modal body (required for padding
) និង modal footer (ស្រេចចិត្ត)។ យើងស្នើឱ្យអ្នកបញ្ចូលបឋមកថាម៉ូឌុលជាមួយនឹងសកម្មភាពច្រានចោលនៅពេលណាដែលអាចធ្វើទៅបាន ឬផ្តល់សកម្មភាពច្រានចោលជាក់ស្តែងផ្សេងទៀត។
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<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>
បិទ/បើកការបង្ហាញគំរូដែលដំណើរការដោយចុចប៊ូតុងខាងក្រោម។ វានឹងរំកិលចុះក្រោម ហើយចុះពីខាងលើនៃទំព័រ។
<!-- 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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<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>
នៅពេលដែល modals វែងពេកសម្រាប់ viewport ឬឧបករណ៍របស់អ្នកប្រើ ពួកវារមូរដោយឯករាជ្យពីទំព័រខ្លួនឯង។ សាកល្បងការបង្ហាញខាងក្រោមដើម្បីមើលថាតើយើងមានន័យយ៉ាងណា។
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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>
បន្ថែម .modal-dialog-centered
ទៅ .modal-dialog
កណ្តាលនៃម៉ូឌុលបញ្ឈរ។
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">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>
ព័ត៌មានជំនួយ និង ផ្ទាំង ព័ត៌មាន អាចត្រូវបានដាក់នៅក្នុងម៉ូឌុលតាមតម្រូវការ។ នៅពេលដែលម៉ូឌុលត្រូវបានបិទ គន្លឹះឧបករណ៍ និងព័ត៌មានលេចចេញខាងក្នុងក៏ត្រូវបានច្រានចោលដោយស្វ័យប្រវត្តិផងដែរ។
<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>
ប្រើប្រាស់ប្រព័ន្ធក្រឡាចត្រង្គ 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 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>
មានប៊ូតុងមួយចំនួនដែលបើកម៉ូឌុលដូចគ្នាជាមួយនឹងមាតិកាខុសគ្នាបន្តិចដែរឬទេ? ប្រើ event.relatedTarget
និង គុណលក្ខណៈ HTMLdata-*
(អាច តាមរយៈ jQuery ) ដើម្បីផ្លាស់ប្តូរខ្លឹមសារនៃម៉ូឌុល អាស្រ័យលើប៊ូតុងមួយណាដែលត្រូវចុច។
ខាងក្រោមនេះគឺជាការបង្ហាញផ្ទាល់តាមពីក្រោយដោយឧទាហរណ៍ HTML និង JavaScript។ សម្រាប់ព័ត៌មានបន្ថែម សូម អានឯកសារព្រឹត្តិការណ៍ modal សម្រាប់ព័ត៌មានលម្អិតនៅលើ 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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<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)
})
សម្រាប់ម៉ូឌុលដែលគ្រាន់តែបង្ហាញជាជាងបន្ថយក្នុងការមើល សូមដក .fade
ថ្នាក់ចេញពីការសម្គាល់ម៉ូឌុលរបស់អ្នក។
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
...
</div>
ប្រសិនបើកម្ពស់នៃម៉ូឌុលផ្លាស់ប្តូរខណៈពេលដែលវាបើក អ្នកគួរតែហៅ $('#myModal').modal('handleUpdate')
ដើម្បីកែតម្រូវទីតាំងរបស់ម៉ូឌុលក្នុងករណីដែលរបាររមូរលេចឡើង។
ត្រូវប្រាកដថាបន្ថែម role="dialog"
និង aria-labelledby="..."
យោងចំណងជើងម៉ូឌុល ទៅ និង .modal
ខ្លួន វាផ្ទាល់។ លើសពីនេះទៀត អ្នកអាចផ្តល់ការពិពណ៌នាអំពីប្រអប់ម៉ូឌុលរបស់អ្នកជាមួយ នៅលើ .role="document"
.modal-dialog
aria-describedby
.modal
ការបង្កប់វីដេអូ YouTube នៅក្នុងម៉ូឌុលទាមទារ JavaScript បន្ថែមដែលមិននៅក្នុង Bootstrap ដើម្បីបញ្ឈប់ការចាក់សារថ្មីដោយស្វ័យប្រវត្តិ និងច្រើនទៀត។ សូមមើលការបង្ហោះ Stack Overflow ដែលមានប្រយោជន៍នេះ សម្រាប់ព័ត៌មានបន្ថែម។
ម៉ូឌុលមានទំហំស្រេចចិត្តពីរ ដែលអាចរកបានតាមរយៈថ្នាក់កែប្រែដែលត្រូវដាក់នៅលើ .modal-dialog
. ទំហំទាំងនេះចាប់ផ្តើមនៅចំណុចបំបែកជាក់លាក់ ដើម្បីជៀសវាងរបាររមូរផ្តេកនៅលើច្រកមើលឃើញតូចចង្អៀត។
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>
កម្មវិធីជំនួយម៉ូឌុលបិទបើកមាតិកាលាក់របស់អ្នកតាមតម្រូវការ តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ វាក៏បន្ថែម .modal-open
ទៅ <body>
ដើម្បីបដិសេធឥរិយាបទរមូរលំនាំដើម និងបង្កើត a .modal-backdrop
ដើម្បីផ្តល់តំបន់ចុចសម្រាប់ការបដិសេធម៉ូឌុលដែលបានបង្ហាញនៅពេលចុចនៅខាងក្រៅម៉ូឌុល។
ធ្វើឱ្យម៉ូឌុលសកម្មដោយមិនសរសេរ JavaScript ។ កំណត់ data-toggle="modal"
នៅលើធាតុឧបករណ៍បញ្ជា ដូចជាប៊ូតុងមួយ រួមជាមួយ data-target="#foo"
ឬ href="#foo"
ដើម្បីកំណត់គោលដៅម៉ូឌុលជាក់លាក់មួយដើម្បីបិទបើក។
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
ហៅម៉ូឌុលដែលមានលេខសម្គាល់ myModal
ជាមួយបន្ទាត់តែមួយនៃ JavaScript៖
$('#myModal').modal(options)
ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-
ដូចក្នុង data-backdrop=""
.
ឈ្មោះ | ប្រភេទ | លំនាំដើម | ការពិពណ៌នា |
---|---|---|---|
ផ្ទៃខាងក្រោយ | ប៊ូលីនឬខ្សែអក្សរ'static' |
ពិត | រួមបញ្ចូលធាតុផ្ទៃខាងក្រោយម៉ូឌុល។ ជាជម្រើស បញ្ជាក់ static សម្រាប់ផ្ទាំងខាងក្រោយដែលមិនបិទម៉ូឌុលនៅពេលចុច។ |
ក្តារចុច | ប៊ូលីន | ពិត | បិទម៉ូឌុលនៅពេលចុចគ្រាប់ចុចគេច |
ការផ្តោតអារម្មណ៍ | ប៊ូលីន | ពិត | ដាក់ការផ្តោតទៅលើ modal នៅពេលដែលបានចាប់ផ្តើម។ |
បង្ហាញ | ប៊ូលីន | ពិត | បង្ហាញម៉ូឌុលនៅពេលចាប់ផ្តើម។ |
វិធីសាស្រ្ត និងការផ្លាស់ប្តូរអសមកាល
វិធីសាស្រ្ត API ទាំងអស់គឺ អសមកាល ហើយចាប់ផ្តើមការ ផ្លាស់ប្តូរ ។ ពួកគេត្រឡប់ទៅអ្នកហៅចូលវិញភ្លាមៗ នៅពេលដែលការផ្លាស់ប្តូរត្រូវបានចាប់ផ្តើម ប៉ុន្តែ មុនពេលវាបញ្ចប់ ។ លើសពីនេះទៀត ការហៅតាមវិធីសាស្ត្រលើ សមាសភាគអន្តរកាលនឹងត្រូវបានមិនអើពើ ។
ធ្វើឱ្យមាតិការបស់អ្នកសកម្មជាគំរូ។ ទទួលយកជម្រើសស្រេចចិត្ត object
។
$('#myModal').modal({
keyboard: false
})
បិទ/បើកម៉ូឌុលដោយដៃ។ ត្រឡប់ទៅកាន់អ្នកហៅទូរសព្ទវិញ មុនពេលដែលម៉ូឌុលពិតជាត្រូវបានបង្ហាញ ឬលាក់shown.bs.modal
( ឧទាហរណ៍ មុនពេល hidden.bs.modal
ព្រឹត្តិការណ៍កើតឡើង)។
$('#myModal').modal('toggle')
បើកម៉ូឌុលដោយដៃ។ ត្រឡប់ទៅអ្នកហៅទូរស័ព្ទវិញ មុនពេលដែលម៉ូឌុលត្រូវបានបង្ហាញយ៉ាងពិតប្រាកដ (ឧទាហរណ៍ មុនពេល shown.bs.modal
ព្រឹត្តិការណ៍កើតឡើង)។
$('#myModal').modal('show')
លាក់ម៉ូឌុលដោយដៃ។ ត្រឡប់ទៅកាន់អ្នកហៅទូរសព្ទវិញ មុនពេលដែលម៉ូឌុលពិតជាត្រូវបានលាក់ (ឧទាហរណ៍ មុនពេល hidden.bs.modal
ព្រឹត្តិការណ៍កើតឡើង)។
$('#myModal').modal('hide')
កែសម្រួលទីតាំងរបស់ម៉ូឌុលដោយដៃប្រសិនបើកម្ពស់នៃម៉ូឌុលផ្លាស់ប្តូរខណៈពេលដែលវាបើក (ឧទាហរណ៍ក្នុងករណីរបាររមូរលេចឡើង) ។
$('#myModal').modal('handleUpdate')
បំផ្លាញម៉ូឌុលនៃធាតុមួយ។
ថ្នាក់ modal របស់ Bootstrap បង្ហាញព្រឹត្តិការណ៍មួយចំនួនសម្រាប់ការភ្ជាប់ចូលទៅក្នុងមុខងារ modal ។ ព្រឹត្តិការណ៍ modal ទាំងអស់ត្រូវបានបាញ់នៅ modal ខ្លួនវាផ្ទាល់ (ឧទាហរណ៍នៅ <div class="modal">
) ។
ប្រភេទព្រឹត្តិការណ៍ | ការពិពណ៌នា |
---|---|
show.bs.modal | ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ នៅពេលដែល show វិធីសាស្ត្រ instance ត្រូវបានហៅ។ ប្រសិនបើបណ្តាលមកពីការចុច ធាតុដែលបានចុចគឺអាចប្រើបានជា relatedTarget លក្ខណសម្បត្តិនៃព្រឹត្តិការណ៍។ |
បង្ហាញ.bs.modal | ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់នៅពេលដែលម៉ូឌុលត្រូវបានធ្វើឱ្យអ្នកប្រើអាចមើលឃើញ (នឹងរង់ចាំការផ្លាស់ប្តូរ CSS ដើម្បីបញ្ចប់)។ ប្រសិនបើបណ្តាលមកពីការចុច ធាតុដែលបានចុចគឺអាចប្រើបានជា relatedTarget លក្ខណសម្បត្តិនៃព្រឹត្តិការណ៍។ |
hide.bs.modal | ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់ភ្លាមៗនៅពេលដែល hide វិធីសាស្ត្រវត្ថុត្រូវបានហៅ។ |
hidden.bs.modal | ព្រឹត្តិការណ៍នេះត្រូវបានបណ្តេញចេញនៅពេលដែលម៉ូឌុលបានបញ្ចប់ត្រូវបានលាក់ពីអ្នកប្រើប្រាស់ (នឹងរង់ចាំការផ្លាស់ប្តូរ CSS បញ្ចប់)។ |
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})