မော်ဒယ်

မီးပုံးများ၊ အသုံးပြုသူအကြောင်းကြားချက်များ သို့မဟုတ် လုံးဝစိတ်ကြိုက်အကြောင်းအရာများအတွက် သင့်ဆိုဒ်သို့ ဒိုင်ယာလော့ခ်များထည့်ရန် Bootstrap ၏ JavaScript modal ပလပ်အင်ကို အသုံးပြုပါ။

ဤစာမျက်နှာတွင်

ဘယ်လိုအလုပ်လုပ်လဲ

Bootstrap ၏ modal အစိတ်အပိုင်းကို စတင်ခြင်းမပြုမီ ကျွန်ုပ်တို့၏မီနူးရွေးချယ်မှုများသည် မကြာသေးမီက ပြောင်းလဲသွားသောကြောင့် အောက်ပါတို့ကို သေချာဖတ်ပါ။

Modal များကို HTML၊ CSS နှင့် JavaScript တို့ဖြင့် တည်ဆောက်ထားသည်။ ၎င်းတို့သည် စာရွက်စာတမ်းရှိ အခြားအရာအားလုံးအပေါ်တွင် နေရာချထားပြီး ၎င်း <body>အစား မော်ဒယ်အကြောင်းအရာကို လှိမ့်ပေးရန်အတွက် လိပ်ကို ဖယ်ရှားပါ။
modal "backdrop" ကိုနှိပ်ခြင်းဖြင့် modal ကိုအလိုအလျောက်ပိတ်လိမ့်မည်။
Bootstrap သည် တစ်ကြိမ်လျှင် modal window တစ်ခုသာ ပံ့ပိုးပေးသည်။ အသုံးပြုသူအတွေ့အကြုံ ညံ့ဖျင်းသည်ဟု ကျွန်ုပ်တို့ယုံကြည်သောကြောင့် Nested ပုံစံများကို ပံ့ပိုးမထားပါ။
Modals များကို position: fixedတစ်ခါတစ်ရံတွင် ၎င်း၏ rendering နှင့်ပတ်သက်ပြီး အနည်းငယ်ထူးခြားနိုင်ပါသည်။ ဖြစ်နိုင်သည့်အခါတိုင်း၊ အခြားဒြပ်စင်များမှ ဝင်ရောက်စွက်ဖက်ခြင်းကို ရှောင်ရှားရန် သင်၏ modal HTML ကို ထိပ်တန်းအဆင့်တွင် ထားလိုက်ပါ။ .modalအခြားပုံသေဒြပ်စင်တစ်ခုအတွင်း nesting လုပ်သောအခါတွင် သင်သည် ပြဿနာများနှင့် ရင်ဆိုင်ရဖွယ် ရှိသည်။
တစ်ဖန်၊ အကြောင်းမှာ၊ position: fixedမိုဘိုင်းစက်ပစ္စည်းများတွင် modals အသုံးပြုခြင်းနှင့်ပတ်သက်သောသတိပေးချက်များအချို့ရှိသည်။ အသေးစိတ်အတွက် ကျွန်ုပ်တို့၏ဘရောက်ဆာပံ့ပိုးမှုစာရွက်စာတမ်း ကို ကြည့်ပါ ။
HTML5 သည် ၎င်း၏ semantics ကို သတ်မှတ်ပုံကြောင့်၊ HTML autofocusattribute သည် Bootstrap modals များတွင် အကျိုးသက်ရောက်မှု မရှိပါ။ တူညီသောအကျိုးသက်ရောက်မှုရရှိရန်၊ စိတ်ကြိုက် JavaScript အချို့ကို အသုံးပြုပါ-

const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})

ဤအစိတ်အပိုင်း၏ ကာတွန်းအကျိုးသက်ရောက်မှုသည် prefers-reduced-motionမီဒီယာမေးမြန်းမှုအပေါ် မူတည်ပါသည်။ ကျွန်ုပ်တို့၏ဝင်ရောက်နိုင်မှုမှတ်တမ်း၏ လျှော့ချထားသောရွေ့လျားမှုအပိုင်းကို ကြည့်ပါ ။

သရုပ်ပြများနှင့် အသုံးပြုမှုလမ်းညွှန်ချက်များကို ဆက်လက်ဖတ်ရှုပါ။

ဥပမာများ

အောက်တွင် static modal ဥပမာ (၎င်း၏ အဓိပ္ပါယ်မှာ ၎င်းကို positionလွှမ်းမိုး displayထားသည်)။ ပါဝင်သည့်ပုံစံခေါင်းစီး၊ မော်ဒယ်ကိုယ်ထည် (အတွက် လိုအပ်သည် 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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-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-bs-toggle="modal" data-bs-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="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-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-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="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-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

ရှည်လျားသောအကြောင်းအရာကို ရွှေ့ခြင်း။

အသုံးပြုသူ၏ မြင်ကွင်းပို့တ် သို့မဟုတ် စက်ပစ္စည်းအတွက် မော်ဒယ်များ ရှည်လွန်းသောအခါ၊ ၎င်းတို့သည် စာမျက်နှာနှင့် ကင်းကွာသွားကြသည်။ ကျွန်ုပ်တို့ဘာကိုဆိုလိုသည်ကိုကြည့်ရန် အောက်ပါသရုပ်ပြကို စမ်းကြည့်ပါ။

. .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>

Tooltips နှင့် popovers

Tooltips နှင့် popovers များကို လိုအပ်သလို modals အတွင်း ထည့်သွင်းနိုင်ပါသည်။ Modals များကို ပိတ်လိုက်သောအခါ၊ အတွင်းမှ tooltips နှင့် popovers များကိုလည်း အလိုအလျောက်ပိတ်သွားမည်ဖြစ်သည်။

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-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="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

ဇယားကွက်ကိုအသုံးပြုခြင်း။

Modal တစ်ခုအတွင်း Bootstrap grid စနစ်အား .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 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-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>

အနည်းငယ်ကွဲပြားသောအကြောင်းအရာများဖြင့် တူညီသောပုံစံကို အစပျိုးပေးသည့် ခလုတ်များစွာရှိပါသလား။ မည်သည့်ခလုတ်ကို နှိပ်ထားသည်ပေါ်မူတည်၍ modal ၏ အကြောင်းအရာများ ကွဲပြားစေရန် event.relatedTargetနှင့် HTML data-bs-*ရည်ညွှန်း ချက်များကို အသုံးပြု ပါ။

အောက်တွင် နမူနာ HTML နှင့် JavaScript တို့နောက်တွင် တိုက်ရိုက်သရုပ်ပြထားသည်။ ပိုမိုသိရှိလိုပါက၊ အသေးစိတ်အချက်အလက်များအတွက် modal events docs ကို ဖတ်ရှုပါrelatedTarget ။

html

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <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-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
  // Button that triggered the modal
  const button = event.relatedTarget
  // Extract info from data-bs-* attributes
  const recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  const modalTitle = exampleModal.querySelector('.modal-title')
  const modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = `New message to ${recipient}`
  modalBodyInput.value = recipient
})

Modals များကြားတွင် ပြောင်းပါ။

data-bs-targetအချို့သော လိမ္မာပါးနပ်သော နေရာချထားမှု နှင့် ရည်ညွှန်း ချက်များ ဖြင့် အမျိုးမျိုးသော မော်ဒယ်များကြားတွင် ကူးပြောင်း data-bs-toggleပါ။ ဥပမာအားဖြင့်၊ ဖွင့်ထားပြီးသော အကောင့်ဝင်မှုပုံစံအတွင်းမှ စကားဝှက်ပြန်လည်သတ်မှတ်မှုပုံစံကို ပြောင်းနိုင်သည်။ မော်ဒယ်အများအပြားကို တစ်ချိန်တည်းတွင် မဖွင့်နိုင်သည်ကို သတိပြုပါ —ဤနည်းလမ်းသည် သီးခြားပုံစံနှစ်ခုကြားတွင် ရိုးရှင်းစွာပြောင်းနိုင်သည်။

ပထမပုံစံကိုဖွင့်ပါ။

html

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

ကာတွန်းကို ပြောင်းပါ။

variable သည် modal fade-in animation မတိုင်မီ $modal-fade-transformtransform state ကို ဆုံးဖြတ်သည်၊ variable သည် modal fade-in animation ၏ အဆုံးတွင် ပြောင်းလဲမှုကို ဆုံးဖြတ်သည် ။.modal-dialog$modal-show-transform.modal-dialog

ဥပမာ- Zoom-in animation လိုချင်ရင် သတ်မှတ်လို့ရပါတယ် $modal-fade-transform: scale(.8)။

လှုပ်ရှားသက်ဝင်မှုကို ဖယ်ရှားပါ။

ကြည့်ရှုရန် မှိန်သွားမည့်အစား ရိုးရိုးရှင်းရှင်း ပေါ်လာသည့် မော်ဒယ်များအတွက်၊ .fadeသင်၏ modal markup မှ အတန်းကို ဖယ်ရှားပါ။

<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
  ...
</div>

တက်ကြွသောအမြင့်များ

ဖွင့်ထားစဉ်တွင် modal တစ်ခု၏ အမြင့်သည် ပြောင်းလဲပါက၊ myModal.handleUpdate()scrollbar တစ်ခုပေါ်လာပါက modal ၏ အနေအထားကို ပြန်လည်ချိန်ညှိရန် ခေါ်ဆိုသင့်ပါသည်။

သုံးစွဲနိုင်မှု

aria-labelledby="..."modal ခေါင်းစဉ်ကို ကိုးကား၍ ထည့်သွင်းရန် သေချာပါစေ .modal။ ထို့အပြင်၊ aria-describedbyon on ဖြင့် သင်၏ modal dialog ၏ ရှင်းလင်းချက်ကို သင် ပေးနိုင်ပါသည် .modal။ role="dialog"JavaScript ကတဆင့် ထည့်ပြီးသား မို့ ထည့်ဖို့ မလိုဘူးဆိုတာ သတိပြုပါ ။

YouTube ဗီဒီယိုများကို ထည့်သွင်းခြင်း။

YouTube ဗီဒီယိုများကို modals တွင် မြှုပ်နှံခြင်းသည် ဖွင့်ခြင်းနှင့် အခြားအရာများကို အလိုအလျောက်ရပ်တန့်ရန် Bootstrap တွင် မရှိသည့် နောက်ထပ် JavaScript လိုအပ်သည်။ နောက်ထပ်အချက်အလက်များအတွက် ဤအသုံးဝင်သော Stack Overflow ပို့စ်ကို ကြည့်ပါ ။

ရွေးချယ်နိုင်သော အရွယ်အစားများ

Modals များတွင် ထားရှိရန် ပြုပြင်မွမ်းမံမှု အတန်းများမှတစ်ဆင့် ရရှိနိုင်သော ရွေးချယ်နိုင်သော အရွယ်အစား သုံးခုရှိသည် .modal-dialog။ ကျဉ်းမြောင်းသော မြင်ကွင်းများပေါ်ရှိ အလျားလိုက် scrollbar များကို ရှောင်ရှားရန် ဤအရွယ်အစားများသည် အချို့သော breakpoints များတွင် စတင်ဝင်ရောက်ပါသည်။

အရွယ်အစား	အတန်း	Modal max-width
သေးငယ်သည်။	`.modal-sm`	`300px`
ပုံသေ	တစ်ခုမှ	`500px`
ကြီးမားသည်။	`.modal-lg`	`800px`
ပိုကြီးတယ်။	`.modal-xl`	`1140px`

ပြုပြင်မွမ်းမံမှုအတန်းအစားမပါဘဲ ကျွန်ုပ်တို့၏မူလပုံစံ modal သည် "အလတ်စား" အရွယ်အစား modal ဖြစ်သည်။

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

အခြား override သည် user viewport ကို ဖုံးအုပ်ထားသည့် modal တစ်ခုကို ပေါ်လာရန် ရွေးချယ်မှုဖြစ်ပြီး၊ ပေါ်တွင် နေရာချထားသည့် modifier အတန်းများမှတစ်ဆင့် ရရှိနိုင်သော ရွေးချယ်မှု .modal-dialogဖြစ်သည်။

အတန်း	ရရှိနိုင်မှု
`.modal-fullscreen`	အမြဲတမ်း
`.modal-fullscreen-sm-down`	`576px`
`.modal-fullscreen-md-down`	`768px`
`.modal-fullscreen-lg-down`	`992px`
`.modal-fullscreen-xl-down`	`1200px`
`.modal-fullscreen-xxl-down`	`1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

CSS

ကိန်းရှင်များ

v5.2.0 တွင် ထည့်သွင်းထားသည်။

Bootstrap ၏ ပြောင်းလဲနေသော CSS variables ချဉ်းကပ်မှု၏ တစ်စိတ်တစ်ပိုင်းအနေဖြင့်၊ ယခု modals များသည် local CSS variables များကို အသုံးပြုနေပြီဖြစ်သည်။.modal အချိန် နှင့် .modal-backdropတပြေးညီ ပိုမိုကောင်းမွန်အောင် စိတ်ကြိုက်ပြုလုပ်ရန်အတွက် အသုံးပြုပါသည်။ CSS variable များအတွက် တန်ဖိုးများကို Sass မှတစ်ဆင့် သတ်မှတ်ပေးထားသောကြောင့် Sass စိတ်ကြိုက်ပြင်ဆင်ခြင်းကိုလည်း ပံ့ပိုးထားပါသည်။

  --#{$prefix}modal-zindex: #{$zindex-modal};
  --#{$prefix}modal-width: #{$modal-md};
  --#{$prefix}modal-padding: #{$modal-inner-padding};
  --#{$prefix}modal-margin: #{$modal-dialog-margin};
  --#{$prefix}modal-color: #{$modal-content-color};
  --#{$prefix}modal-bg: #{$modal-content-bg};
  --#{$prefix}modal-border-color: #{$modal-content-border-color};
  --#{$prefix}modal-border-width: #{$modal-content-border-width};
  --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
  --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
  --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
  --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
  --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
  --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
  --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
  --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
  --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
  --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
  --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};

  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

Sass ကိန်းရှင်များ

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        var(--#{$prefix}border-color-translucent);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;

$modal-header-border-color:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

ဒကာ

တုံ့ပြန်မှုရှိသော မျက်နှာပြင် အပြည့်ပုံစံများကို မြေပုံ မှတစ်ဆင့် ထုတ်ပေးပြီး $breakpointsကွင်းဆက်တစ်ခုဖြစ်သည် scss/_modal.scss။

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header,
      .modal-footer {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }
    }
  }
}

အသုံးပြုမှု

modal plugin သည် ဒေတာ attributes သို့မဟုတ် JavaScript မှတဆင့် တောင်းဆိုမှုအရ သင့်ဝှက်ထားသော အကြောင်းအရာကို ပြောင်းပေးသည်။ ၎င်းသည် ပုံသေ လှိမ့်ခြင်း အပြုအမူကို လွှမ်းမိုးစေပြီး .modal-backdropပြထားသည့် မော်ဒယ်များကို ဖယ်ရှားရန်အတွက် ကလစ်ဧရိယာကို ပံ့ပိုးပေးသည့် ပုံစံကို ထုတ်ပေးသည်။

ဒေတာဂုဏ်တော်များမှတဆင့်

ပြောင်းရန်

JavaScript မရေးဘဲ modal ကို အသက်သွင်းပါ။ သတ်မှတ်သည်။data-bs-toggle="modal"ခလုတ်တစ်ခုနှင့်အတူ၊ data-bs-target="#foo"သို့မဟုတ် href="#foo"ပြောင်းရန် သီးခြားပုံစံတစ်ခုအား ပစ်မှတ်ထားရန်

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>

ပယ်ရန်

dataခလုတ်တစ်ခုပေါ်ရှိ ရည်ညွှန်းချက် ဖြင့် ထုတ်ပယ်ခြင်းကို အောင်မြင်နိုင်သည်။အောက်ဖော်ပြပါအတိုင်း modal အတွင်း

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

သို့မဟုတ် modal အပြင်ဘက် ခလုတ်တစ်ခုပေါ်တွင်data-bs-targetသို့မဟုတ် အောက်ဖော်ပြပါအတိုင်း အသုံးပြု၍

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>

မော်ဒယ်တစ်ခုအား ထုတ်ပယ်ရန် နည်းလမ်းနှစ်ခုစလုံးကို ပံ့ပိုးထားသော်လည်း၊ မော်ဒယ်တစ်ခုမှ ပြင်ပမှ ထုတ်ပယ်ခြင်းသည် ARIA ရေးသားပြုစုခြင်းဆိုင်ရာ လမ်းညွှန်ဒိုင်ယာလော့ဂ် (modal) ပုံစံ နှင့် မကိုက်ညီကြောင်း သတိရပါ ။ ဒါကို မင်းကိုယ်တိုင် စွန့်စားလုပ်ပါ။

JavaScript မှတဆင့်

JavaScript တစ်ကြောင်းတည်းဖြင့် modal တစ်ခုကို ဖန်တီးပါ-

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

ရွေးချယ်စရာများ

ရွေးချယ်စရာများကို ဒေတာ attributes သို့မဟုတ် JavaScript မှတဆင့် ကျော်ဖြတ်နိုင်သောကြောင့်၊ သင်သည် ရွေးချယ်မှုအမည်ကို ထပ်ပေါင်းထည့်နိုင်ပါသည်။data-bs- နိုင်သည် data-bs-animation="{value}"။ ဒေတာ attribute များမှတစ်ဆင့် ရွေးချယ်မှုများကို ဖြတ်သန်းသည့်အခါ “ camelCase ” မှ “ kebab-case ” သို့ ရွေးချယ်မှုအမည်၏ case အမျိုးအစားကို ပြောင်းလဲရန် သေချာပါစေ ။ ဥပမာအားဖြင့်၊ data-bs-custom-class="beautifier"အစားကို သုံးပါ data-bs-customClass="beautifier"။

Bootstrap 5.2.0 အရ၊ အစိတ်အပိုင်းအားလုံးသည် JSON စာကြောင်းကဲ့သို့ ရိုးရှင်းသော အစိတ်အပိုင်းဖွဲ့စည်းမှုပုံစံကို ထားရှိပေးနိုင်သည့် စမ်းသပ် လက်ဝယ်ထားသော ဒေတာ attribute ကို ပံ့ပိုးပေးပါသည်။ data-bs-configဒြပ်စင်တစ်ခုတွင် data-bs-config='{"delay":0, "title":123}'၊ data-bs-title="456"ဂုဏ်ရည်များပါရှိသောအခါ၊ နောက်ဆုံးဖြစ်သည်။title တန်ဖိုးသည် ဖြစ်မည်ဖြစ်ပြီး456 attribute များသည် ပေးထားသောတန်ဖိုးများကို အစားထိုးမည်ဖြစ်သည် data-bs-config။ ထို့အပြင်၊ ရှိပြီးသားဒေတာ attribute များသည် JSON တန်ဖိုးများကဲ့သို့ နေရာယူနိုင်သည် data-bs-delay='{"show":0,"hide":150}'။

နာမည်	ရိုက်ပါ။	ပုံသေ	ဖော်ပြချက်
`backdrop`	ဘူလီယန်၊`'static'`	`true`	ပုံစံ-နောက်ခံဒြပ်စင်တစ်ခု ပါဝင်သည်။ တနည်းအားဖြင့် `static`ကလစ်နှိပ်လိုက်သောအခါ modal ကို မပိတ်နိုင်သော နောက်ခံကားအတွက် သတ်မှတ်ပါ။
`focus`	ဘူလီယံ	`true`	စတင်သောအခါတွင် modal ကိုအာရုံစိုက်သည်။
`keyboard`	ဘူလီယံ	`true`	Escape သော့ကို နှိပ်လိုက်သောအခါ modal ကို ပိတ်ပါ။

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

Asynchronous နည်းလမ်းများနှင့် အသွင်ကူးပြောင်းမှုများ

API နည်းလမ်းအားလုံးသည် အ ညီအမျှ ဖြစ်ပြီး အသွင်ကူးပြောင်းမှု ကို စတင်သည် ။ အကူးအပြောင်းစတင်သည်နှင့် မပြီးဆုံးမီတွင် ၎င်းတို့သည် ခေါ်ဆိုသူထံသို့ ပြန်သွားကြသည် ။ ထို့အပြင်၊ transitioning component တစ်ခုပေါ်ရှိ method ခေါ်ဆိုမှုကို လျစ်လျူရှု ပါမည်။

နောက်ထပ်အချက်အလက်များအတွက် ကျွန်ုပ်တို့၏ JavaScript စာရွက်စာတမ်းကို ကြည့်ပါ ။

ရွေးချယ်ခွင့်များ

သင့်အကြောင်းအရာကို ပုံစံတူအဖြစ် အသက်သွင်းပါ။ စိတ်ကြိုက်ရွေးချယ်စရာများကို လက်ခံသည် object။

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})

နည်းလမ်း	ဖော်ပြချက်
`dispose`	ဒြပ်စင်တစ်ခု၏ပုံစံကို ဖျက်ဆီးသည်။ (DOM ဒြပ်စင်ပေါ်ရှိ သိမ်းဆည်းထားသည့် ဒေတာကို ဖယ်ရှားသည်)
`getInstance`	DOM ဒြပ်စင်တစ်ခုနှင့်ဆက်စပ်နေသော modal instance ကိုရရှိရန်ခွင့်ပြုသည့် Static နည်းလမ်း။
`getOrCreateInstance`	DOM ဒြပ်စင်နှင့် ဆက်စပ်နေသော modal instance ကို ရယူရန် ခွင့်ပြုသည့် Static method သည် ၎င်းကို စတင်ခြင်းမပြုပါက အသစ်တစ်ခုဖန်တီးပါ။
`handleUpdate`	ဖွင့်ထားစဉ်တွင် modal ၏ အမြင့်သည် ပြောင်းလဲပါက modal ၏ အနေအထားကို ကိုယ်တိုင်ပြန်ပြင်ပါ (ဆိုလိုသည်မှာ scrollbar တစ်ခုပေါ်လာပါက)။
`hide`	ပုံစံတစ်ခုကို ကိုယ်တိုင် ဝှက်ထားသည်။ modal သည် အမှန်တကယ် ဝှက်ထားခြင်းမရှိမီ ခေါ်ဆိုသူထံသို့ ပြန်လည်ရောက်ရှိသည် (ဆိုလိုသည်မှာ `hidden.bs.modal`ပွဲမဖြစ်ပွားမီ)။
`show`	မော်ဒယ်တစ်ခုကို ကိုယ်တိုင်ဖွင့်ပါ။ modal ကို အမှန်တကယ် မပြသမီ ခေါ်ဆိုသူထံ ပြန်လည်ရောက်ရှိသည် (ဆိုလိုသည်မှာ `shown.bs.modal`ပွဲမဖြစ်ပွားမီ)။ `relatedTarget`ထို့အပြင်၊ သင်သည် modal ဖြစ်ရပ်များ ( ပိုင်ဆိုင်မှု အဖြစ်) တွင်လက်ခံနိုင်သောအငြင်းအခုံတစ်ခုအနေဖြင့် DOM ဒြပ်စင်ကိုဖြတ်သန်းနိုင်သည် ။ (ဆိုလိုသည်မှာ `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`.
`toggle`	ပုံစံတစ်ခုကို ကိုယ်တိုင်ပြောင်းသည်။ modal ကို အမှန်တကယ် ပြသခြင်း သို့မဟုတ် ဝှက်ထားခြင်း မပြုမီ ခေါ်ဆိုသူထံ ပြန်လည်ပေးပို့ခြင်း (ဥပမာ `shown.bs.modal`သို့မဟုတ် `hidden.bs.modal`ဖြစ်ရပ်မဖြစ်ပေါ်မီ)။

အဲ့ဒါနဲ့

Bootstrap ၏ modal class သည် modal လုပ်ဆောင်နိုင်စွမ်းသို့ ချိတ်ဆက်ရန်အတွက် ဖြစ်ရပ်အချို့ကို ဖော်ထုတ်ပေးပါသည်။ modal အဖြစ်အပျက်အားလုံးကို modal ကိုယ်တိုင် (ဆိုလိုသည်မှာ <div class="modal">) တွင် ပစ်ခတ်သည်။

ပွဲ	ဖော်ပြချက်
`hide.bs.modal`	`hide`သာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်ကို ချက်ခြင်း အလုပ်ဖြုတ်သည် ။
`hidden.bs.modal`	အသုံးပြုသူထံမှ modal ကို ဝှက်ပြီးသွားသောအခါတွင် ဤဖြစ်ရပ်ကို အလုပ်ဖြုတ်သည် (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။
`hidePrevented.bs.modal`	မော်ဒယ်ကို ပြသသည့်အခါ၊ ၎င်း၏ နောက်ခံပုံသည် `static`မော်ဒယ်၏ အပြင်ဘက်တွင် ကလစ်တစ်ချက်နှိပ်ခြင်းဖြင့် လုပ်ဆောင်သည်။ Escape ခလုတ်ကို `keyboard`နှိပ်ပြီး ရွေးချယ်မှုအဖြစ် သတ်မှတ် လိုက်သောအခါတွင်လည်း ဖြစ်ရပ်ကို အလုပ်ဖြုတ် `false`ပါသည်။
`show.bs.modal`	`show`သာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင် ပါသည်။ ကလစ်တစ်ခုကြောင့် ဖြစ်ပါက၊ နှိပ်လိုက်သော အစိတ်အပိုင်းကို `relatedTarget`ပွဲ၏ ပိုင်ဆိုင်မှုအဖြစ် ရရှိနိုင်သည်။
`shown.bs.modal`	မော်ဒယ်ကို အသုံးပြုသူမြင်အောင်ပြုလုပ်ပြီးသောအခါ (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။ ကလစ်တစ်ခုကြောင့် ဖြစ်ပါက၊ နှိပ်လိုက်သော အစိတ်အပိုင်းကို `relatedTarget`ပွဲ၏ ပိုင်ဆိုင်မှုအဖြစ် ရရှိနိုင်သည်။

const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})