in English

ម៉ូឌុល

ប្រើកម្មវិធីជំនួយម៉ូឌុល JavaScript របស់ Bootstrap ដើម្បីបន្ថែមប្រអប់ទៅកាន់គេហទំព័ររបស់អ្នកសម្រាប់ប្រអប់ពន្លឺ ការជូនដំណឹងរបស់អ្នកប្រើ ឬខ្លឹមសារផ្ទាល់ខ្លួនទាំងស្រុង។

របៀបដែលវាដំណើរការ

មុនពេលចាប់ផ្តើមជាមួយនឹងសមាសភាគម៉ូឌុលរបស់ Bootstrap ត្រូវប្រាកដថាបានអានខាងក្រោមព្រោះជម្រើសម៉ឺនុយរបស់យើងបានផ្លាស់ប្តូរនាពេលថ្មីៗនេះ។

  • Modals ត្រូវបានបង្កើតជាមួយ HTML, CSS, និង JavaScript។ ពួកវាត្រូវបានដាក់នៅលើអ្វីផ្សេងទៀតនៅក្នុងឯកសារ ហើយដករមូរចេញពី <body>ដើម្បីឱ្យមាតិការមូរជំនួសវិញ។
  • ការចុចលើ "ផ្ទាំងខាងក្រោយ" ម៉ូឌុលនឹងបិទម៉ូឌុលដោយស្វ័យប្រវត្តិ។
  • Bootstrap គាំទ្រតែបង្អួចម៉ូឌុលមួយក្នុងពេលតែមួយ។ ម៉ូឌុលដែលលាក់មិនត្រូវបានគាំទ្រទេ ដោយសារយើងជឿថាពួកវាជាបទពិសោធន៍អ្នកប្រើប្រាស់មិនល្អ។
  • ម៉ូឌុលប្រើប្រាស់ position: fixedដែលជួនកាលអាចពិសេសបន្តិចអំពីការបង្ហាញរបស់វា។ នៅពេលណាដែលអាចធ្វើទៅបាន សូមដាក់ម៉ូឌុល HTML របស់អ្នកនៅក្នុងទីតាំងកម្រិតកំពូល ដើម្បីជៀសវាងការជ្រៀតជ្រែកដែលមានសក្តានុពលពីធាតុផ្សេងទៀត។ អ្នកទំនងជានឹងមានបញ្ហានៅពេលដាក់សំបុក .modalនៅក្នុងធាតុថេរមួយផ្សេងទៀត។
  • ជា​ថ្មី​ម្តង​ទៀត ដោយ​សារ​តែ position: fixed​មាន​ការ​ព្រមាន​មួយ​ចំនួន​ជាមួយ​នឹង​ការ​ប្រើ​ម៉ូឌុល​នៅ​លើ​ឧបករណ៍​ចល័ត។ សូមមើលឯកសារជំនួយកម្មវិធីរុករករបស់យើង សម្រាប់ព័ត៌មានលម្អិត។
  • ដោយសាររបៀបដែល HTML5 កំណត់អត្ថន័យរបស់វា គុណលក្ខណៈ autofocusHTML មិនមានឥទ្ធិពលនៅក្នុងម៉ូឌុល Bootstrap ទេ។ ដើម្បីសម្រេចបាននូវប្រសិទ្ធិភាពដូចគ្នា សូមប្រើ JavaScript ផ្ទាល់ខ្លួនមួយចំនួន៖
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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" 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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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>

ផ្ទៃខាងក្រោយឋិតិវន្ត

នៅពេលដែលផ្ទាំងខាងក្រោយត្រូវបានកំណត់ទៅជាឋិតិវន្ត ម៉ូឌុលនឹងមិនបិទនៅពេលចុចនៅខាងក្រៅវា។ ចុចប៊ូតុងខាងក្រោមដើម្បីសាកល្បង។

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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">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-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" 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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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)
})

ផ្លាស់ប្តូរចលនា

$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').modal('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>

ការប្រើប្រាស់

កម្មវិធីជំនួយម៉ូឌុលបិទបើកមាតិកាលាក់របស់អ្នកតាមតម្រូវការ តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ 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>

តាមរយៈ JavaScript

ហៅម៉ូឌុលដែលមានលេខសម្គាល់ myModalជាមួយបន្ទាត់តែមួយនៃ JavaScript៖

$('#myModal').modal(options)

ជម្រើស

ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-ដូចក្នុង data-backdrop="".

ឈ្មោះ ប្រភេទ លំនាំដើម ការពិពណ៌នា
ផ្ទៃខាងក្រោយ ប៊ូលីនឬខ្សែអក្សរ'static' ពិត រួមបញ្ចូលធាតុផ្ទៃខាងក្រោយម៉ូឌុល។ ជាជម្រើស បញ្ជាក់ staticសម្រាប់ផ្ទាំងខាងក្រោយដែលមិនបិទម៉ូឌុលនៅពេលចុច។
ក្តារចុច ប៊ូលីន ពិត បិទម៉ូឌុលនៅពេលចុចគ្រាប់ចុចគេច
ការផ្តោតអារម្មណ៍ ប៊ូលីន ពិត ដាក់​ការ​ផ្តោ​ត​ទៅ​លើ modal នៅ​ពេល​ដែល​បាន​ចាប់​ផ្តើ​ម​។
បង្ហាញ ប៊ូលីន ពិត បង្ហាញម៉ូឌុលនៅពេលចាប់ផ្តើម។

វិធីសាស្រ្ត

វិធីសាស្រ្ត និងការផ្លាស់ប្តូរអសមកាល

វិធីសាស្រ្ត API ទាំងអស់គឺ អសមកាល ហើយចាប់ផ្តើមការ ផ្លាស់ប្តូរ ។ ពួកគេត្រឡប់ទៅអ្នកហៅចូលវិញភ្លាមៗ នៅពេលដែលការផ្លាស់ប្តូរត្រូវបានចាប់ផ្តើម ប៉ុន្តែ មុនពេលវាបញ្ចប់ ។ លើស​ពី​នេះ​ទៀត ការ​ហៅ​តាម​វិធី​សាស្ត្រ​លើ ​សមាសភាគ​អន្តរកាល​នឹង​ត្រូវ​បាន​មិន​អើពើ

សូមមើលឯកសារ JavaScript របស់យើងសម្រាប់ព័ត៌មានបន្ថែម

.modal(options)

ធ្វើឱ្យមាតិការបស់អ្នកសកម្មជាគំរូ។ ទទួលយកជម្រើសស្រេចចិត្ត object

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

បិទ/បើកម៉ូឌុលដោយដៃ។ ត្រឡប់ទៅកាន់អ្នកហៅទូរសព្ទវិញ មុនពេលដែលម៉ូឌុលពិតជាត្រូវបានបង្ហាញ ឬលាក់shown.bs.modal ( ឧទាហរណ៍ មុនពេល hidden.bs.modalព្រឹត្តិការណ៍កើតឡើង)។

$('#myModal').modal('toggle')

.modal('show')

បើកម៉ូឌុលដោយដៃ។ ត្រឡប់ទៅអ្នកហៅទូរស័ព្ទវិញ មុនពេលដែលម៉ូឌុលត្រូវបានបង្ហាញយ៉ាងពិតប្រាកដ (ឧទាហរណ៍ មុនពេល shown.bs.modalព្រឹត្តិការណ៍កើតឡើង)។

$('#myModal').modal('show')

.modal('hide')

លាក់ម៉ូឌុលដោយដៃ។ ត្រឡប់ទៅកាន់អ្នកហៅទូរសព្ទវិញ មុនពេលដែលម៉ូឌុលពិតជាត្រូវបានលាក់ (ឧទាហរណ៍ មុនពេល hidden.bs.modalព្រឹត្តិការណ៍កើតឡើង)។

$('#myModal').modal('hide')

.modal('handleUpdate')

កែសម្រួលទីតាំងរបស់ម៉ូឌុលដោយដៃប្រសិនបើកម្ពស់នៃម៉ូឌុលផ្លាស់ប្តូរខណៈពេលដែលវាបើក (ឧទាហរណ៍ក្នុងករណីរបាររមូរលេចឡើង) ។

$('#myModal').modal('handleUpdate')

.modal('dispose')

បំផ្លាញម៉ូឌុលនៃធាតុមួយ។

ព្រឹត្តិការណ៍

ថ្នាក់ 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 បញ្ចប់)។
hidePrevented.bs.modal ព្រឹត្តិការណ៍នេះត្រូវបានបណ្តេញចេញនៅពេលដែលម៉ូឌុលត្រូវបានបង្ហាញ ផ្ទាំងខាងក្រោយរបស់វាគឺ staticហើយការចុចនៅខាងក្រៅម៉ូឌុល ឬការចុចគ្រាប់ចុចគេចត្រូវបានអនុវត្តជាមួយនឹងជម្រើសក្តារចុច ឬ data-keyboardកំណត់ទៅ false.
$('#myModal').on('hidden.bs.modal', function (event) {
  // do something...
})