Source

မော်ဒယ်

မီးပုံးများ၊ အသုံးပြုသူအကြောင်းကြားချက်များ သို့မဟုတ် လုံးဝစိတ်ကြိုက်အကြောင်းအရာများအတွက် သင့်ဆိုဒ်သို့ ဒိုင်ယာလော့ခ်များထည့်ရန် 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 အချို့ကို အသုံးပြုပါ-
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

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

ဥပမာများ

အောက်တွင် static modal ဥပမာ (၎င်း၏ အဓိပ္ပါယ်မှာ ၎င်းကို positionလွှမ်းမိုး displayထားသည်)။ ပါဝင်သည့်ပုံစံခေါင်းစီး၊ မော်ဒယ်ကိုယ်ထည် (အတွက် လိုအပ်သည် 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>

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

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

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

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

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

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

ပုံစံတူအကြောင်းအရာအမျိုးမျိုး

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

အောက်တွင် နမူနာ HTML နှင့် JavaScript တို့နောက်တွင် တိုက်ရိုက်သရုပ်ပြထားသည်။ ပိုမိုသိရှိလိုပါက၊ အသေးစိတ်အချက်အလက်များအတွက် modal events docs ကို ဖတ်ရှုပါ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သင်၏ modal markup မှ အတန်းကို ဖယ်ရှားပါ။

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

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

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

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

modal ခေါင်းစဉ်၊ to နှင့် သူ့ဘာသာသူ role="dialog"ကို ကိုးကားပြီး ထည့်ရန် သေချာပါ စေ။ ထို့အပြင်၊ on on ဖြင့် သင်၏ modal dialog ၏ ရှင်းလင်းချက်ကို သင် ပေးနိုင်ပါသည် ။aria-labelledby="...".modalrole="document".modal-dialogaria-describedby.modal

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

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

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

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

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

အသုံးပြုမှု

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

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

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

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

JavaScript မှတဆင့်

myModalJavaScript တစ်ကြောင်းတည်း ဖြင့် ID ဖြင့် modal ကိုခေါ်ဆိုပါ -

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

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

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

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

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

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

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

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

.modal(options)

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

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

.modal('toggle')

ပုံစံတစ်ခုကို ကိုယ်တိုင်ပြောင်းသည်။ modal ကို အမှန်တကယ် ပြသခြင်း သို့မဟုတ် ဝှက်ထားခြင်း မပြုမီ ခေါ်ဆိုသူထံ ပြန်လည်ပေးပို့ခြင်း (ဥပမာ shown.bs.modalသို့မဟုတ် hidden.bs.modalဖြစ်ရပ်မဖြစ်ပေါ်မီ)။

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

.modal('show')

မော်ဒယ်တစ်ခုကို ကိုယ်တိုင်ဖွင့်ပါ။ modal ကို အမှန်တကယ် မပြသမီ ခေါ်ဆိုသူထံ ပြန်လည်ရောက်ရှိသည် (ဆိုလိုသည်မှာ shown.bs.modalပွဲမဖြစ်ပွားမီ)။

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

.modal('hide')

ပုံစံတစ်ခုကို ကိုယ်တိုင် ဝှက်ထားသည်။ modal သည် အမှန်တကယ် ဝှက်ထားခြင်းမရှိမီ ခေါ်ဆိုသူထံသို့ ပြန်လည်ရောက်ရှိသည် (ဆိုလိုသည်မှာ hidden.bs.modalပွဲမဖြစ်ပွားမီ)။

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

.modal('handleUpdate')

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

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

.modal('dispose')

ဒြပ်စင်တစ်ခု၏ပုံစံကို ဖျက်ဆီးသည်။

အဲ့ဒါနဲ့

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

ပွဲအမျိုးအစား ဖော်ပြချက်
show.bs.modal showသာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင် ပါသည်။ ကလစ်တစ်ခုကြောင့် ဖြစ်ပါက၊ နှိပ်လိုက်သော အစိတ်အပိုင်းကို relatedTargetပွဲ၏ ပိုင်ဆိုင်မှုအဖြစ် ရရှိနိုင်သည်။
show.bs.modal မော်ဒယ်ကို အသုံးပြုသူမြင်အောင်ပြုလုပ်ပြီးသောအခါ (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။ ကလစ်တစ်ခုကြောင့် ဖြစ်ပါက၊ နှိပ်လိုက်သော အစိတ်အပိုင်းကို relatedTargetပွဲ၏ ပိုင်ဆိုင်မှုအဖြစ် ရရှိနိုင်သည်။
hide.bs.modal hideသာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်ကို ချက်ခြင်း အလုပ်ဖြုတ်သည် ။
hidden.bs.modal အသုံးပြုသူထံမှ modal ကို ဝှက်ပြီးသွားသောအခါတွင် ဤဖြစ်ရပ်ကို အလုပ်ဖြုတ်သည် (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။ 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})