in English

মোডাল

লাইটবক্স, ব্যৱহাৰকাৰী জাননী, বা সম্পূৰ্ণৰূপে স্বনিৰ্বাচিত বিষয়বস্তুৰ বাবে আপোনাৰ চাইটত সংলাপসমূহ যোগ কৰিবলে Bootstrap ৰ JavaScript মডাল প্লাগইন ব্যৱহাৰ কৰক।

কেনেকৈ কাম কৰে

Bootstrap ৰ মডাল উপাদানৰ সৈতে আৰম্ভ কৰাৰ আগতে, নিম্নলিখিত নিশ্চিতভাৱে পঢ়ক কাৰণ আমাৰ মেনু বিকল্পসমূহ শেহতীয়াকৈ সলনি হৈছে ।

  • মডালসমূহ HTML, CSS, আৰু JavaScript ৰ সৈতে নিৰ্মাণ কৰা হয়। সিহঁতক দস্তাবেজৰ বাকী সকলো বস্তুৰ ওপৰত স্থাপন কৰা হয় আৰু তাৰ পৰা স্ক্ৰল আঁতৰাই পেলায় <body>যাতে ইয়াৰ পৰিৱৰ্তে মডাল বিষয়বস্তু স্ক্ৰল হয়।
  • মডাল “backdrop” ত ক্লিক কৰিলে স্বয়ংক্ৰিয়ভাৱে মডালটো বন্ধ হৈ যাব।
  • বুটষ্ট্ৰেপে এটা সময়ত কেৱল এটা মডাল উইন্ডো সমৰ্থন কৰে । নেষ্টেড মডালসমূহ সমৰ্থিত নহয় কাৰণ আমি ইয়াক ব্যৱহাৰকাৰী অভিজ্ঞতা দুৰ্বল বুলি বিশ্বাস কৰোঁ।
  • মডালসমূহে ব্যৱহাৰ কৰে position: fixed, যি কেতিয়াবা ইয়াৰ ৰেণ্ডাৰৰ বিষয়ে অলপ বিশেষ হ'ব পাৰে। যেতিয়াই সম্ভৱ, অন্য উপাদানসমূহৰ পৰা সম্ভাৱ্য হস্তক্ষেপ এৰাই চলিবলৈ আপোনাৰ মডাল HTML এটা শীৰ্ষ-স্তৰৰ অৱস্থানত ৰাখক। আপুনি সম্ভৱতঃ .modalঅন্য এটা নিৰ্দিষ্ট উপাদানৰ ভিতৰত এটা নেষ্ট কৰাৰ সময়ত সমস্যাৰ সন্মুখীন হ'ব।
  • আকৌ এবাৰ, কাৰণ position: fixed, মোবাইল ডিভাইচত মডাল ব্যৱহাৰ কৰাৰ ক্ষেত্ৰত কিছু সতৰ্কবাণী আছে। বিৱৰণৰ বাবে আমাৰ ব্ৰাউজাৰ সমৰ্থন নথিপত্ৰ চাওক।
  • HTML5 এ ইয়াৰ অৰ্থবোধ কেনেকৈ সংজ্ঞায়িত কৰে তাৰ বাবে, HTML autofocusবৈশিষ্ট্যৰ বুটষ্ট্ৰেপ মডালত কোনো প্ৰভাৱ নাই। একে প্ৰভাৱ লাভ কৰিবলৈ, কিছুমান স্বনিৰ্বাচিত জাভাস্ক্রিপ্ট ব্যৱহাৰ কৰক:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})
এই উপাদানৰ এনিমেচন প্ৰভাৱ prefers-reduced-motionমাধ্যম প্ৰশ্নৰ ওপৰত নিৰ্ভৰশীল। আমাৰ অভিগম্যতা নথিপত্ৰৰ হ্ৰাস কৰা গতি অংশ চাওক ।

ডেমো আৰু ব্যৱহাৰৰ নিৰ্দেশনাৰ বাবে পঢ়ি থাকিব।

উদাহৰণ

তলত এটা স্থিতিশীল মডাল উদাহৰণ দিয়া হৈছে (অৰ্থাৎ ইয়াৰ positionআৰু displayঅভাৰৰাইড কৰা হৈছে)। অন্তৰ্ভুক্ত কৰা হৈছে মডাল হেডাৰ, মডাল বডি (ৰ বাবে প্ৰয়োজনীয় padding), আৰু মডাল ফুটাৰ (ঐচ্ছিক)। আমি অনুৰোধ কৰোঁ যে আপুনি সম্ভৱ হ'লে বাতিল কাৰ্য্যসমূহৰ সৈতে মডাল হেডাৰসমূহ অন্তৰ্ভুক্ত কৰক, বা অন্য এটা স্পষ্ট বৰ্খাস্ত কাৰ্য্যসমূহ প্ৰদান কৰক।

<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="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-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="#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="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="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="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">Understood</button>
      </div>
    </div>
  </div>
</div>

দীঘলীয়া বিষয়বস্তু স্ক্ৰল কৰা

যেতিয়া মডালসমূহ ব্যৱহাৰকাৰীৰ দৰ্শনপৰ্ট বা ডিভাইচৰ বাবে অতি দীঘল হয়, সিহঁতে পৃষ্ঠাটোৰ পৰা স্বাধীনভাৱে স্ক্ৰল কৰে। আমি কি বুজাব বিচাৰিছো চাবলৈ তলৰ ডেমোটো চেষ্টা কৰক।

আপুনি এটা স্ক্ৰ'ল কৰিব পৰা মডালও সৃষ্টি কৰিব পাৰে যি মডালৰ দেহ স্ক্ৰল কৰাৰ অনুমতি দিয়ে ত যোগ .modal-dialog-scrollableকৰি .modal-dialog

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

উলম্বভাৱে কেন্দ্ৰীভূত

মডালক উলম্বভাৱে কেন্দ্ৰ .modal-dialog-centeredকৰিবলৈ to যোগ কৰক ।.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>

টুলটিপছ আৰু পপঅভাৰ

প্ৰয়োজন অনুসৰি টুলটিপ আৰু পপঅভাৰ মডালৰ ভিতৰত ৰাখিব পাৰি। যেতিয়া মডালসমূহ বন্ধ কৰা হয়, ভিতৰৰ যিকোনো টুলটিপ আৰু পপঅভাৰসমূহো স্বয়ংক্ৰিয়ভাৱে বাতিল কৰা হয়।

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

গ্ৰীড ব্যৱহাৰ কৰি

এটা মডালৰ ভিতৰত বুটষ্ট্ৰেপ গ্ৰীড ব্যৱস্থাপ্ৰণালী ব্যৱহাৰ .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আৰু HTML data-*বৈশিষ্ট্যসমূহ (সম্ভৱতঃ jQuery ৰ যোগেদি ) কোনটো বুটাম ক্লিক কৰা হৈছিল তাৰ ওপৰত নিৰ্ভৰ কৰি মডালৰ বিষয়বস্তু সলনি কৰিবলে।

তলত এটা লাইভ ডেমো দিয়া হৈছে আৰু তাৰ পিছত উদাহৰণ HTML আৰু JavaScript দিয়া হৈছে। অধিক তথ্যৰ বাবে, ত বিৱৰণৰ বাবে মডাল ইভেন্টসমূহৰ নথিপত্ৰসমূহ পঢ়ক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" 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="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)
})

এনিমেচন সলনি কৰক

চলকটোৱে মডাল ফেড-ইন এনিমেচনৰ আগৰ $modal-fade-transformৰূপান্তৰ অৱস্থা নিৰ্ধাৰণ কৰে , চলকটোৱে মডাল ফেড-ইন এনিমেচনৰ শেষত ৰূপান্তৰ অৱস্থা নিৰ্ধাৰণ কৰে ।.modal-dialog$modal-show-transform.modal-dialog

যদি আপুনি উদাহৰণস্বৰূপ এটা জুম-ইন এনিমেচন বিচাৰে, আপুনি সংহতি কৰিব পাৰে $modal-fade-transform: scale(.8)

এনিমেচন আঁতৰাওক

দৰ্শন কৰিবলে ম্লান হোৱাৰ পৰিবৰ্তে দেখা দিয়া মডালৰ বাবে, .fadeআপোনাৰ মডাল মাৰ্কআপৰ পৰা শ্ৰেণী আঁতৰাওক।

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

গতিশীল উচ্চতা

যদি এটা মডালৰ উচ্চতা ই খোলা থকাৰ সময়ত সলনি হয়, আপুনি $('#myModal').modal('handleUpdate')এটা স্ক্ৰলবাৰ ওলোৱাৰ ক্ষেত্ৰত মডালৰ অৱস্থান পুনৰায় সামঞ্জস্য কৰিবলে কল কৰিব লাগে।

অভিগম্যতা

যোগ কৰাটো নিশ্চিত কৰক aria-labelledby="...", মডাল শিৰোনামৰ উল্লেখ কৰি, .modal. অতিৰিক্তভাৱে, আপুনি আপোনাৰ মডাল সংলাপৰ এটা বিৱৰণ aria-describedbyon ৰ সৈতে দিব পাৰে .modal। মন কৰিব যে আপুনি যোগ কৰাৰ প্ৰয়োজন নাই role="dialog"যিহেতু আমি ইতিমধ্যে জাভাস্ক্রিপ্টৰ জৰিয়তে যোগ কৰিছো।

ইউটিউব ভিডিঅ’ এম্বেড কৰা

YouTube ভিডিঅ'সমূহ মডালত সন্নিৱিষ্ট কৰাৰ বাবে বুটষ্ট্ৰেপত নথকা অতিৰিক্ত জাভাস্ক্রিপ্টৰ প্ৰয়োজন হয় স্বয়ংক্ৰিয়ভাৱে প্লেবেক বন্ধ কৰিবলে আৰু অধিক। অধিক তথ্যৰ বাবে এই সহায়ক ষ্টেক অভাৰফ্ল' পোষ্ট চাওক ।

ঐচ্ছিক আকাৰসমূহ

মডালসমূহৰ তিনিটা বৈকল্পিক আকাৰ আছে, এটা ত স্থাপন কৰিবলে পৰিবৰ্তক শ্ৰেণীসমূহৰ যোগেদি উপলব্ধ .modal-dialog। এই আকাৰসমূহে সংকীৰ্ণ দৰ্শনপৰ্টসমূহত অনুভূমিক স্ক্ৰলবাৰসমূহ এৰাই চলিবলৈ নিৰ্দিষ্ট ব্ৰেকপইন্টসমূহত কিক ইন কৰে।

আকাৰ শ্ৰেণী মডাল সৰ্বোচ্চ-প্ৰস্থ
সৰু .modal-sm 300px
ডিফল্ট একো নাই 500px
ডাঙৰ .modal-lg 800px
অতিৰিক্ত ডাঙৰ .modal-xl 1140px

পৰিবৰ্তক শ্ৰেণী অবিহনে আমাৰ অবিকল্পিত মডালে “মধ্যমীয়া” আকাৰৰ মডাল গঠন কৰে।

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

ব্যৱহাৰ

মডাল প্লাগ-ইনে চাহিদা অনুসৰি আপোনাৰ লুকাই থকা বিষয়বস্তু টগল কৰে, ডাটা বৈশিষ্ট্যসমূহ বা জাভাস্ক্রিপ্টৰ যোগেদি। ই অবিকল্পিত স্ক্ৰলিং আচৰণ অভাৰৰাইড কৰিবলৈও যোগ কৰে .modal-openআৰু মডালৰ বাহিৰত ক্লিক কৰাৰ সময়ত দেখুওৱা মডালসমূহ বাতিল কৰাৰ বাবে এটা ক্লিক অঞ্চল প্ৰদান কৰিবলৈ এটা সৃষ্টি কৰে।<body>.modal-backdrop

ডাটা এট্ৰিবিউটৰ জৰিয়তে

জাভাস্ক্রিপ্ট লিখা নোহোৱাকৈ এটা মডাল সক্ৰিয় কৰক। data-toggle="modal"এটা নিয়ন্ত্ৰক উপাদানত সংহতি কৰক , যেনে এটা বুটাম, এটা data-target="#foo"বা href="#foo"টগল কৰিবলে এটা নিৰ্দিষ্ট মডাল লক্ষ্য কৰিবলৈ।

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

জাভাস্ক্রিপ্টৰ জৰিয়তে

myModalজাভাস্ক্রিপ্টৰ এটা শাৰীৰ সৈতে id ৰ সৈতে এটা মডাল কল কৰক :

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

বিকল্পসমূহ

বিকল্পসমূহ ডাটা এট্ৰিবিউট বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি। তথ্য বৈশিষ্ট্যসমূহৰ বাবে, বিকল্পৰ নাম ত সংযুক্ত কৰক data-, যেনে data-backdrop="".

নাম প্ৰকাৰ ডিফল্ট বিৱৰণ
পটভূমি বুলিয়ান বা ষ্ট্ৰিং'static' সঁচা এটা মডাল-বেকড্ৰপ উপাদান অন্তৰ্ভুক্ত কৰা হৈছে। বৈকল্পিকভাৱে, staticএটা পটভূমিৰ বাবে ধাৰ্য্য কৰক যি ক্লিকত মডাল বন্ধ নকৰে।
কিবৰ্ড বুলিয়ান সঁচা এস্কেপ কি' টিপিলে মডাল বন্ধ কৰে
ধ্যান কেন্দ্ৰিত বুলিয়ান সঁচা আৰম্ভণি কৰাৰ সময়ত মডালত ফোকাচ ৰাখে।
প্ৰদৰ্শনী বুলিয়ান সঁচা আৰম্ভণি কৰাৰ সময়ত মডাল দেখুৱায়।

পদ্ধতিসমূহ

এচিংক্ৰ’নাছ পদ্ধতি আৰু পৰিৱৰ্তন

সকলো API পদ্ধতি এচিনক্ৰ'নাছ আৰু এটা পৰিৱৰ্তন আৰম্ভ কৰে । ট্ৰেঞ্জিচন আৰম্ভ হোৱাৰ লগে লগে কিন্তু শেষ হোৱাৰ আগতেই তেওঁলোকে কল কৰাজনৰ ওচৰলৈ উভতি যায় ৷ ইয়াৰ উপৰিও, এটা পৰিৱৰ্তনশীল উপাদানত এটা পদ্ধতি কল আওকাণ কৰা হ'ব

অধিক তথ্যৰ বাবে আমাৰ জাভাস্ক্রিপ্ট আলেখ্যন চাওক

.modal(options)

আপোনাৰ বিষয়বস্তু এটা মডাল হিচাপে সক্ৰিয় কৰে। এটা বৈকল্পিক বিকল্পসমূহ গ্ৰহণ কৰে object

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

.modal('toggle')

এটা মডাল হস্তচালিতভাৱে টগল কৰে। মডাল প্ৰকৃততে দেখুৱা বা লুকুৱাই ৰখাৰ আগতে (অৰ্থাৎ বা ইভেন্ট সংঘটিত হোৱাৰ আগতে) কলাৰলৈ উভতি যায়।shown.bs.modalhidden.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')

এটা মৌলৰ মডাল ধ্বংস কৰে।

ইভেন্টসমূহ

বুটষ্ট্ৰেপৰ মডাল শ্ৰেণীয়ে মডাল কাৰ্য্যকৰীতাত হুক কৰাৰ বাবে কেইটামান ইভেন্ট উন্মোচন কৰে। সকলো মডাল ইভেন্ট মডালটোৰ ওপৰত নিজেই (অৰ্থাৎ <div class="modal">) গুলিয়াই দিয়া হয়।

ইভেন্টৰ ধৰণ বিৱৰণ
শ্ব'.বি.এছ.ম'ডাল এই ইভেন্ট তৎক্ষণাত ফায়াৰ হয় যেতিয়া showইনষ্টেন্স পদ্ধতি কল কৰা হয়। যদি এটা ক্লিকৰ ফলত হয়, ক্লিক কৰা উপাদানটো relatedTargetইভেন্টৰ বৈশিষ্ট্য হিচাপে উপলব্ধ।
দেখুওৱা হৈছে.bs.modal এই ইভেন্টটো গুলিয়াই দিয়া হয় যেতিয়া মডালক ব্যৱহাৰকাৰীৰ বাবে দৃশ্যমান কৰা হয় (CSS পৰিৱৰ্তনসমূহ সম্পূৰ্ণ হ'বলৈ অপেক্ষা কৰিব)। যদি এটা ক্লিকৰ ফলত হয়, ক্লিক কৰা উপাদানটো relatedTargetইভেন্টৰ বৈশিষ্ট্য হিচাপে উপলব্ধ।
লুকুৱাওক.bs.modal এই ইভেন্ট তৎক্ষণাত ফায়াৰ কৰা হয় যেতিয়া hideইনষ্টেন্স পদ্ধতি কল কৰা হয়।
লুকাই থকা.bs.modal এই ইভেন্টটো গুলিয়াই দিয়া হয় যেতিয়া মডাল ব্যৱহাৰকাৰীৰ পৰা লুকুৱাই ৰখা শেষ হয় (CSS পৰিৱৰ্তনসমূহ সম্পূৰ্ণ হ'বলৈ অপেক্ষা কৰিব)।
hideপ্ৰতিৰোধ কৰা.bs.modal এই ইভেন্টটো জুই কৰা হয় যেতিয়া মডাল দেখুৱা হয়, ইয়াৰ পটভূমি হয় staticআৰু মডালৰ বাহিৰত এটা ক্লিক বা এটা এস্কেপ কি' টিপক কিবৰ্ড বিকল্পৰ সৈতে সম্পাদন কৰা হয় বা data-keyboardলে সংহতি কৰা হয় false
$('#myModal').on('hidden.bs.modal', function (event) {
  // do something...
})