HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap 4 ကျူတိုရီရယ်

BS4 ပင်မစာမျက်နှာ BS4 ကို စတင်လိုက်ပါ။ BS4 ကွန်တိန်နာများ BS4 Grid အခြေခံ BS4 စာစီစာရိုက် BS4 အရောင်များ BS4 ဇယားများ BS4 ရုပ်ပုံများ BS4 Jumbotron BS4 သတိပေးချက်များ BS4 ခလုတ်များ BS4 ခလုတ်အုပ်စုများ BS4 တံဆိပ်များ BS4 တိုးတက်မှုဘားများ BS4 Spinners BS4 Pagination BS4 စာရင်းအုပ်စုများ BS4 ကတ်များ BS4 ဆွဲချမှုများ BS4 ခေါက်သိမ်းပါ။ BS4 ရေတပ် BS4 Navbar BS4 ပုံစံများ BS4 ထည့်သွင်းမှုများ BS4 ထည့်သွင်းမှုအုပ်စုများ BS4 စိတ်ကြိုက်ပုံစံများ BS4 ချားရဟတ် BS4 Modal BS4 Tooltip BS4 Popover BS4 ဆန္ဒပြုခြင်း။ BS4 Scrollspy BS4 အသုံးအဆောင်များ BS4 Flex BS4 သင်္ကေတများ BS4 မီဒီယာအရာဝတ္ထုများ BS4 စစ်ထုတ်မှုများ

Bootstrap 4 Grid

BS4 Grid စနစ် BS4 သည် အထပ်လိုက်/အလျားလိုက် BS4 Grid XSmall BS4 Grid အသေး BS4 Grid Medium BS4 Grid အကြီး BS4 Grid XLarge BS4 Grid နမူနာများ

Bootstrap 4 အခြား

BS4 အခြေခံ Template BS4 လေ့ကျင့်ခန်းများ BS4 Quiz

Bootstrap 4 Ref

အတန်းအားလုံး JS သတိပေးချက် JS ခလုတ် JS ချားရဟတ် JS ခေါက်သိမ်းပါ။ JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Toasts JS Tooltip


Bootstrap JS Modal

❮ ယခင် နောက်တစ်ခု ❯

Modal CSS အတန်းများ

Modals အကြောင်း သင်ခန်းစာအတွက်၊ ကျွန်ုပ်တို့၏ Bootstrap Modal Tutorial ကို ဖတ်ရှုပါ ။

Class Description Example
.modal Creates a modal
.modal-content Styles the modal properly with border, background-color, etc. Use this class to add the modal's header, body, and footer
.modal-dialog-centered Centers the modal vertically and horizontally within the page
.modal-dialog-scrollable Adds a scrollbar inside the modal
.modal-header Defines the style for the header of the modal
.modal-body Defines the style for the body of the modal
.modal-footer Defines the style for the footer in the modal. Note: This area is right-aligned by default. To change this, add the justify-content-start or justify-content-center together with the .modal-footer class
.modal-sm Specifies a small modal
.modal-lg Specifies a large modal
.fade Adds an animation/transition effect which fades the modal in and out

Modal ကို data-* Attributes မှတဆင့် အစပျိုးပါ။

မည်သည့်ဒြပ်စင်သို့ data-toggle="modal"ပေါင်း ထည့်ပါ ။data-target="#modalID"

မှတ်ချက်- ဒြပ်စင် များအတွက် <a>၊ ချန်လှပ် data-targetပြီး ၎င်း href="#modalID"အစား အသုံးပြုပါ-

ဥပမာ

<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Links -->
<a data-toggle="modal" href="#myModal">Open Modal</a>

<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open Modal</p>

JavaScript မှတဆင့် အစပျိုးပါ။

ကိုယ်တိုင်ဖွင့်ပါ-

ဥပမာ

$("#myModal").modal()

Modal ရွေးချယ်မှုများ

ရွေးချယ်စရာများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ ဒေတာရည်ညွှန်းချက်များအတွက်၊ data-backdrop="" တွင်ကဲ့သို့ ရွေးချယ်စရာအမည်ကို data- တွင် ပေါင်းထည့်ပါ။

Name Type Default Description Try it
backdrop boolean or the string "static" true Specifies whether the modal should have a dark overlay:

  • true - dark overlay
  • false - no overlay (transparent)

If you specify the value "static", it is not possible to close the modal when clicking outside of it
keyboard boolean true Specifies whether the modal can be closed with the escape key (Esc):

  • true - the modal can be closed with Esc
  • false - the modal cannot be closed with Esc
show boolean true Specifies whether to show the modal when initialized

Modal နည်းလမ်းများ

အောက်ဖော်ပြပါဇယားတွင် ရနိုင်သောပုံစံနည်းလမ်းများအားလုံးကို စာရင်းပြုစုထားသည်။

Method Description Try it
.modal(options) Activates the content as a modal. See options above for valid values
.modal("toggle") Toggles the modal
.modal("show") Opens the modal
.modal("hide") Hides the modal

Modal ပွဲများ

အောက်ဖော်ပြပါဇယားတွင် ရရှိနိုင်သော ပုံစံတူဖြစ်ရပ်များအားလုံးကို စာရင်းပြုစုထားသည်။

Event Description Try it
show.bs.modal Occurs when the modal is about to be shown
shown.bs.modal Occurs when the modal is fully shown (after CSS transitions have completed)
hide.bs.modal Occurs when the modal is about to be hidden
hidden.bs.modal Occurs when the modal is fully hidden (after CSS transitions have completed)

❮ ယခင် နောက်တစ်ခု ❯