Government Design Component : Build your next best digital experience for Cambodia

ជូនដំណឹងដល់អ្នកប្រើប្រាស់អំពីកិច្ចការជាក់លាក់មួយ និងអាចមានព័ត៌មានសំខាន់ៗដែលអ្នកប្រើប្រាស់ត្រូវធ្វើការសម្រេចចិត្ត។ ឧ. ការទទួលយកលក្ខខណ្ឌប្រើប្រាស់អំឡុងពេលចុះឈ្មោះ។

មានជាទូទៅ

View it on Github

ឧទាហរណ៍

      
    
         
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h3 class="modal-title" id="exampleModalLabel">
        <i class="bi bi-exclamation-circle left me-3"></i>ចំណងជើងផ្លាកជូនដំណឹង
      </h3>
      <button type="button" class="btn-close" aria-label="Close"></button>
    </div>
    <div class="modal-body">​ អ្នកកំពុងអានអត្ថបទនេះក្នុងផ្លាកជូនដំណឹងមួយ!</div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark cgds">បិទ</button>
      <button type="button" class="btn btn-primary cgds">រក្សាទុកការផ្លាស់ប្តូរ</button>
    </div>
  </div>
</div>

        

      
    
         
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary cgds" data-bs-toggle="modal" data-bs-target="#exampleModal">
  ចុចលើនេះដើម្បបើកដំណើរការផ្លាកជូនដំណឹងបុរេជម្រើស
</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">
        <h3 class="modal-title" id="exampleModalLabel">
          <i class="bi bi-exclamation-circle left me-2"></i>ចំណងជើងផ្លាកជូនដំណឹង
        </h3>
        <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-outline-dark cgds" data-bs-dismiss="modal">
          បិទ
        </button>
        <button type="button" class="btn btn-primary cgds">រក្សាទុកការផ្លាស់ប្តូរ</button>
      </div>
    </div>
  </div>
</div>

        

ជម្រើសនៃទំហំ

      
    
         
<button
  type="button"
  class="btn btn-primary btn-sm cgds"
  data-bs-toggle="modal"
  data-bs-target="#exampleModalSmall"
>
  ចុចលើនេះដើម្បីបើកដំណើរការផ្លាកជូនដំណឹងទំហំតូច
</button>
<button
  type="button"
  class="btn btn-primary cgds"
  data-bs-toggle="modal"
  data-bs-target="#exampleModalMedium"
>
  ចុចលើនេះដើម្បីបើកដំណើរការផ្លាកជូនដំណឹងទំហំមធ្យម
</button>
<button
  type="button"
  class="btn btn-primary btn-lg cgds"
  data-bs-toggle="modal"
  data-bs-target="#exampleModalLarge"
>
  ចុចលើនេះដើម្បីបើកដំណើរការផ្លាកជូនដំណឹងទំហំធំ
</button>

<!-- Modal -->
<!-- Modal -->
<div
  class="modal fade"
  id="exampleModalSmall"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalLabel">
          <i class="bi bi-exclamation-circle left me-2"></i>ចំណងជើងផ្លាកជូនដំណឹង
        </h3>
        <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-outline-dark cgds"
          data-bs-dismiss="modal"
        >
          បិទ
        </button>
        <button type="button" class="btn btn-primary cgds">រក្សាទុក</button>
      </div>
    </div>
  </div>
</div>

<div
  class="modal fade"
  id="exampleModalMedium"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalLabel">
          <i class="bi bi-exclamation-circle left me-2"></i>ចំណងជើងផ្លាកជូនដំណឹង
        </h3>
        <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-outline-dark cgds"
          data-bs-dismiss="modal"
        >
        បិទ
        </button>
        <button type="button" class="btn btn-primary cgds">រក្សាទុក</button>
      </div>
    </div>
  </div>
</div>

<div
  class="modal fade"
  id="exampleModalLarge"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalLabel">
          <i class="bi bi-exclamation-circle left me-2"></i>ចំណងជើងផ្លាកជូនដំណឹង
        </h3>
        <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-outline-dark cgds"
          data-bs-dismiss="modal"
        >
        បិទ
        </button>
        <button type="button" class="btn btn-primary cgds">រក្សាទុក</button>
      </div>
    </div>
  </div>
</div>

        

ផ្លាកជូនដំណឹងដែលអាចអូសបាន

ខាងក្រោមនេះគ្រាន់តែជាអក្សរឧទាហរណ៍សម្រាប់ដាក់បំពេញចន្លោះទទេរឱ្យទំព័រនេះមើលទៅឃើញស្អាតតែប៉ុំណ្ណោះ៖

ក្នុងយុគសម័យប្រកួតប្រជែងយ៉ាងស្វិតស្វាញដើម្បីពង្រឹងអំណាចបន្ថែម ក៏ដូចជាក្នុងការពង្រីកឥទ្ធិពលប្រទេសមហាអំណាចផ្សេងៗ ជាពិសេសពីសំណាក់ប្រទេសបារាំង និងប្រទេសអង់គ្លេស ដែលខំប្រឹងវាតទីឥទ្ធិពលខ្លួនទៅតាមបណ្ដារដ្ឋទន់ខ្សោយជាងខ្លួន ក្នុងន័យទាញយកនូវប្រយោជន៍។ ចាប់តាំងពីមានវត្តមាននៃការឈានជើងចូលរបស់បណ្ដាប្រទេសអ៊ឺរ៉ុបមកក្នុងដែនដីអាស៊ីអាគ្នេយ៍ដីគោក ដែលរួមមានដូចជាប្រទេសកម្ពុជា ថៃ វៀតណាម និងភូមា សង្កេតឃើញថា ក្នុងប្រទេសទាំងនេះមានបដិវត្តន៍ថ្មីៗកើតមានឡើងជាបន្តបន្ទាប់ ដែលជះឥទ្ធិពលយ៉ាងសម្បើមទៅលើវិស័យផ្សេងៗ ជាពិសេសនោះគឺវិស័យនយោបាយដែលមានទំនោរទៅរកការផ្លាស់ប្ដូរប្លែកថ្មីមួយចំពោះជនជាតិអម្បូរស្បែកស្រអែមនៅដែនដីសុវណ្ណភូមិមួយនេះ។ ក្នុងនោះទៀតសោតក៏ឃើញផងដែរថា បម្រែបម្រួលនេះហាក់ហុចផលជាអាវុធមុខពីរទៅលើកិច្ចការការបរទេសដោយសម្លឹងទៅរកផលប្រយោជន៌ និងកិច្ចការពារជាតិរៀងៗខ្លួន។

      
    
         
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalScrollable">
  ចុចលើនេះដើម្បីបើកដំណើរការផ្លាកជូនដំណឹងដែលអាចអូសបាន
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" aria-labelledby="exampleModalScrollableTitle"
     aria-modal="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalScrollableTitle">
          <i class="bi bi-exclamation-circle left me-2"></i>ចំណងជើងផ្លាកជូនដំណឹង
        </h3>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
        </button>
      </div>
      <div class="modal-body">
        <p>ខាងក្រោមនេះគ្រាន់តែជាអក្សរឧទាហរណ៍សម្រាប់ដាក់បំពេញចន្លោះទទេរឱ្យទំព័រនេះមើលទៅឃើញស្អាតតែប៉ុំណ្ណោះ៖</p>

        <p>ក្នុងយុគសម័យប្រកួតប្រជែងយ៉ាងស្វិតស្វាញដើម្បីពង្រឹងអំណាចបន្ថែម ក៏ដូចជាក្នុងការពង្រីកឥទ្ធិពលប្រទេសមហាអំណាចផ្សេងៗ ជាពិសេសពីសំណាក់ប្រទេសបារាំង និងប្រទេសអង់គ្លេស ដែលខំប្រឹងវាតទីឥទ្ធិពលខ្លួនទៅតាមបណ្ដារដ្ឋទន់ខ្សោយជាងខ្លួន ក្នុងន័យទាញយកនូវប្រយោជន៍។ ចាប់តាំងពីមានវត្តមាននៃការឈានជើងចូលរបស់បណ្ដាប្រទេសអ៊ឺរ៉ុបមកក្នុងដែនដីអាស៊ីអាគ្នេយ៍ដីគោក ដែលរួមមានដូចជាប្រទេសកម្ពុជា ថៃ វៀតណាម និងភូមា សង្កេតឃើញថា ក្នុងប្រទេសទាំងនេះមានបដិវត្តន៍ថ្មីៗកើតមានឡើងជាបន្តបន្ទាប់ ដែលជះឥទ្ធិពលយ៉ាងសម្បើមទៅលើវិស័យផ្សេងៗ ជាពិសេសនោះគឺវិស័យនយោបាយដែលមានទំនោរទៅរកការផ្លាស់ប្ដូរប្លែកថ្មីមួយចំពោះជនជាតិអម្បូរស្បែកស្រអែម​នៅដែនដីសុវណ្ណភូមិមួយនេះ។ ក្នុងនោះទៀតសោតក៏ឃើញផងដែរថា បម្រែបម្រួលនេះហាក់ហុចផលជាអាវុធមុខពីរទៅលើកិច្ចការការបរទេសដោយសម្លឹងទៅរកផលប្រយោជន៌ និងកិច្ចការពារជាតិរៀងៗខ្លួន។</p>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark cgds" data-bs-dismiss="modal">
          បិទ
        </button>
        <button type="button" class="btn btn-primary">រក្សាទុកការផ្លាស់ប្តូរ</button>
      </div>
    </div>
  </div>
</div>

        

ផ្លាកជូនដំណឹងពេញអេក្រង់

      
    
         
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary cgds" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">
  ផ្លាកជូនដំណឹងពេញ​អេក្រង់
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalFullscreen" tabindex="-1" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalLabel">
          <i class="bi bi-exclamation-circle left me-2"></i>ចំណងជើងផ្លាកជូនដំណឹង
        </h3>
        <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-outline-dark cgds" data-bs-dismiss="modal">
          បិទ
        </button>
        <button type="button" class="btn btn-primary cgds">រក្សាទុកការផ្លាស់ប្តូរ</button>
      </div>
    </div>
  </div>
</div>

        

ធាតុផ្សំ

រូបតំណាង(ដាក់ក៏បានមិនដាក់ក៏បាន)៖ ប្រើដើម្បីផ្តល់ខ្លឹមសារបន្ថែមទៀតចំពោះអ្វីដែលផ្លាកជូនដំណឹងផ្តល់អំពី។
ចំណងជើង៖ ប្រើដើម្បីប្រាប់អ្នកប្រើប្រាស់អំពីអ្វីដែលផ្លាកជូនដំណឹងបានបង្ហាញ។
រូបតំណាងសម្រាប់បិទ(ដាក់ក៏បានមិនដាក់ក៏បាន)៖ អនុញ្ញាតឱ្យអ្នកប្រើប្រាស់សម្រាប់បិទផ្លាកជូនដំណឹងដោយដៃ។
ខ្លឹមសារ៖ ប្រើដើម្បីពន្យល់អំពីអ្វីដែលផ្លាកជូនដំណឹងបានបង្ហាញ។ ឧទាហរណ៍ ការផ្ញើសារមានកំហុស ឬសារបញ្ជាក់។
ប៊ូតុង៖ ប្រើដើម្បីឱ្យអ្នកប្រើប្រាស់ចុចបើកបង្ហាញផ្លាកជូនដំណឹង។

គម្លាត

នៅក្នុងផ្លាកជូនដំណឹង
ត្រូវប្រាកដថាមានគម្លាតយ៉ាងហោចណាស់ 24px នៅក្នុងផ្លាកជូនដំណឹង និងរវាងធាតុនៃខ្លឹមសារ។

គោលការណ៍ណែនាំនៃការប្រើប្រាស់

ផ្លាកជូនដំណឹង គួរតែត្រូវបានប្រើនៅពេលដែល៖

នៅពេលអ្នកចង់បង្អាក់កិច្ចការបច្ចុប្បន្នរបស់អ្នកប្រើប្រាស់ដើម្បីបង្វែរការយកចិត្តទុកដាក់របស់អ្នកប្រើប្រាស់ទៅផ្តោតលើអ្វីផ្សេង។ ជាឧទាហរណ៍ ការបញ្ជាក់នៅពេលដែលអ្នកប្រើប្រាស់ចង់ដាក់ស្នើទម្រង់ អ្នកប្រើប្រាស់ចុះឈ្មោះ និងចូលប្រើប្រាស់។
នៅពេលអ្នកចង់លើកឡើងអំពីអ្វីមួយ។

ផ្លាកជូនដំណឹង មិនគួរតែត្រូវបានប្រើនៅពេលដែល៖

នៅពេលដែលអ្នកត្រូវការបង្ហាញការជូនដំណឹងសាមញ្ញដល់អ្នកប្រើប្រាស់។ វាតែងតែអមជាមួយCTAមួយ ដូចជាការបញ្ជាក់ ឬបំពេញទម្រង់បែបបទ។ ប្រសិនបើអ្នកត្រូវការជូនដំណឹងដល់អ្នកប្រើប្រាស់ដែលមិនភ្ជាប់ជាមួយCTAទេ សូមប្រើអ្វីមួយដែលមិនរំខាននិងមិនបង្អាក់កិច្ចការបច្ចុប្បន្នរបស់អ្នកប្រើប្រាស់ ដូចជាសមាសភាគការជូនដំណឹងជំនួសវិញ។

គោលការណ៍ណែនាំនៃការរចនា

រំលេចឡើងដោយអ្នកប្រើប្រាស់
ឧទាហរណ៍ ផ្លាកជូនដំណឹងគួរតែលេចឡើងក្រោយពេលអ្នកប្រើប្រាស់ចុចដាក់ស្នើរទម្រង់មួយ។ ផ្លាកជូនដំណឹង មិនគួរត្រូវបានបង្ហាញដោយស្វ័យប្រវត្តិចំពោះអ្នកប្រើប្រាស់ទេ លើកលែងករណីចង់ប្រាប់ពួកគាត់ថាដំណើរការជិតអស់ម៉ោង ឬករណីសុំការអនុញ្ញាតគាត់ក្នុងការទទួលយក cookies ជាដើម។

ការសម្រួលនៃចំណងជើង
ត្រូវប្រាកដថាចំណងជើងច្បាស់លាស់សម្រាប់អ្នកប្រើប្រាស់។ ដើម្បីជៀសវាងពីការភ័ន្តច្រឡំ។

ព្យាយាមជៀសវាងពីខ្លឹមសារវែងដែលតម្រូវឱ្យអូស
ខ្លឹមសារវែងពេកនាំឱ្យអ្នកប្រើប្រាស់មិនបានអានវាឱ្យអស់។

ខ្នាតសម្រាប់រចនា

$modal-inner-padding: $spacer !default;
$modal-footer-margin-between: 0.5rem !default;
$modal-dialog-margin: 0.5rem !default;
$modal-dialog-margin-y-sm-up: 1.75rem !default;
$modal-title-line-height: $line-height-base !default;
$modal-content-color: null !default;
$modal-content-bg: $white !default;
$modal-content-border-color: rgba($black, 0.2) !default;
$modal-content-border-width: $border-width !default;
$modal-content-border-radius: $border-radius-lg !default;
$modal-content-inner-border-radius:
subtract(
$modal-content-border-radius,
$modal-content-border-width
) !default;
$modal-content-box-shadow-xs: $box-shadow-sm !default;
$modal-content-box-shadow-sm-up: $box-shadow !default;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: 0.5 !default;
$modal-header-border-color: $border-color !default;
$modal-footer-border-color: $modal-header-border-color !default;
$modal-header-border-width: $modal-content-border-width !default;
$modal-footer-border-width: $modal-header-border-width !default;
$modal-header-padding-y: $modal-inner-padding !default;
$modal-header-padding-x: $modal-inner-padding !default;
$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
$modal-sm: 300px !default;
$modal-md: 500px !default;
$modal-lg: 800px !default;
$modal-xl: 1140px !default;
$modal-fade-transform: translate(0, -50px) !default;
$modal-show-transform: none !default;
$modal-transition: transform 0.3s ease-out !default;
$modal-scale-transform: scale(1.02) !default;

ឧទាហរណ៍

បុរេជម្រើស

ចំណងជើងផ្លាកជូនដំណឹង

មើលកូដ

ផ្លាកជូនដំណឹងតាមបុរេជម្រើស

មើលកូដ

ជម្រើសនៃទំហំ

មើលកូដ

ផ្លាកជូនដំណឹងដែលអាច​អូសបាន

មើលកូដ

ផ្លាកជូនដំណឹងពេញ​អេក្រង់

មើលកូដ

ធាតុផ្សំ

គម្លាត

គោលការណ៍ណែនាំនៃការប្រើប្រាស់

គោលការណ៍ណែនាំនៃការរចនា

ខ្នាតសម្រាប់រចនា

ផ្លាកជូនដំណឹងដែលអាចអូសបាន

ផ្លាកជូនដំណឹងពេញអេក្រង់