Source

ម៉ូឌុល

ប្រើកម្មវិធីជំនួយម៉ូឌុល 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')
})

បន្តអានសម្រាប់ការបង្ហាញ និងការណែនាំអំពីការប្រើប្រាស់។

ឧទាហរណ៍

ខាងក្រោមនេះគឺជា ឧទាហរណ៍គំរូ ឋិតិវន្ត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">&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-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</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">&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>

រមូរមាតិកាវែង

នៅពេលដែល 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">&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>

កណ្តាលបញ្ឈរ

បន្ថែម .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="exampleModalLongTitle">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>

ព័ត៌មានជំនួយ និងការលេចឡើង

ព័ត៌មានជំនួយ និង ផ្ទាំង ព័ត៌មាន អាចត្រូវបានដាក់នៅក្នុងម៉ូឌុលតាមតម្រូវការ។ នៅពេលដែលម៉ូឌុលត្រូវបានបិទ គន្លឹះឧបករណ៍ និងព័ត៌មានលេចចេញខាងក្នុងក៏ត្រូវបានច្រានចោលដោយស្វ័យប្រវត្តិផងដែរ។

<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">&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)
})

លុបចលនា

សម្រាប់ម៉ូឌុលដែលគ្រាន់តែបង្ហាញជាជាងបន្ថយក្នុងការមើល សូមដក .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-dialogaria-describedby.modal

ការបង្កប់វីដេអូ YouTube

ការបង្កប់វីដេអូ 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>

តាមរយៈ 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 បញ្ចប់)។

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})