স্কিপ করে মূল কন্টেন্ট এ যাও ডক্স নেভিগেশন এড়িয়ে যান
in English

মোডাল

লাইটবক্স, ব্যবহারকারীর বিজ্ঞপ্তি বা সম্পূর্ণ কাস্টম সামগ্রীর জন্য আপনার সাইটে ডায়ালগ যোগ করতে বুটস্ট্র্যাপের জাভাস্ক্রিপ্ট মডেল প্লাগইন ব্যবহার করুন।

কিভাবে এটা কাজ করে

বুটস্ট্র্যাপের মডেল কম্পোনেন্ট দিয়ে শুরু করার আগে, আমাদের মেনু বিকল্পগুলি সম্প্রতি পরিবর্তিত হওয়ায় নিম্নলিখিতটি পড়তে ভুলবেন না।

  • এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট দিয়ে মোডাল তৈরি করা হয়। এগুলি নথিতে থাকা সমস্ত কিছুর উপরে অবস্থান করে এবং এর পরিবর্তে স্ক্রোলটি সরিয়ে দেয় <body>যাতে মডেল সামগ্রী স্ক্রোল করে।
  • মডেল "ব্যাকড্রপ" এ ক্লিক করলে স্বয়ংক্রিয়ভাবে মডেলটি বন্ধ হয়ে যাবে।
  • বুটস্ট্র্যাপ একটি সময়ে শুধুমাত্র একটি মডেল উইন্ডো সমর্থন করে। নেস্টেড মডেলগুলি সমর্থিত নয় কারণ আমরা বিশ্বাস করি যে সেগুলি ব্যবহারকারীর অভিজ্ঞতা খারাপ৷
  • মডেলগুলি ব্যবহার করে position: fixed, যা কখনও কখনও এর রেন্ডারিং সম্পর্কে কিছুটা নির্দিষ্ট হতে পারে। যখনই সম্ভব, অন্যান্য উপাদান থেকে সম্ভাব্য হস্তক্ষেপ এড়াতে আপনার মডেল এইচটিএমএলকে একটি শীর্ষ-স্তরের অবস্থানে রাখুন। .modalঅন্য একটি নির্দিষ্ট উপাদানের মধ্যে একটি নেস্ট করার সময় আপনি সম্ভবত সমস্যায় পড়বেন ।
  • আবারও, এর কারণে position: fixed, মোবাইল ডিভাইসে মডেল ব্যবহার করার সাথে কিছু সতর্কতা রয়েছে। বিস্তারিত জানার জন্য আমাদের ব্রাউজার সমর্থন ডক্স দেখুন.
  • HTML5 কীভাবে তার শব্দার্থবিদ্যাকে সংজ্ঞায়িত করে তার কারণে, বুটস্ট্র্যাপ মডেলগুলিতে autofocusএইচটিএমএল অ্যাট্রিবিউটের কোনো প্রভাব নেই। একই প্রভাব অর্জন করতে, কিছু কাস্টম জাভাস্ক্রিপ্ট ব্যবহার করুন:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.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="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>

টুলটিপস এবং 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-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="#" 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 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>

পরিবর্তিত মডেল বিষয়বস্তু

আপনার কাছে একগুচ্ছ বোতাম আছে যা একই মোডেলকে কিছুটা ভিন্ন বিষয়বস্তু সহ ট্রিগার করে? কোন বোতামে ক্লিক করা হয়েছে তার উপর নির্ভর করে মডেলের বিষয়বস্তু পরিবর্তন করতে ব্যবহার করুন event.relatedTargetএবং HTML data-bs-*বৈশিষ্ট্য ।

নীচে HTML এবং JavaScript উদাহরণ সহ একটি লাইভ ডেমো রয়েছে৷ আরও তথ্যের জন্য, বিশদ বিবরণের জন্য মডেল ইভেন্ট ডক্স পড়ুনrelatedTarget

<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>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var 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.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

মডেলের মধ্যে টগল করুন

data-bs-targetএবং বৈশিষ্ট্যগুলির কিছু চতুর বসানো সহ একাধিক মডেলের মধ্যে টগল করুন data-bs-toggle৷ উদাহরণস্বরূপ, আপনি ইতিমধ্যে খোলা সাইন ইন মোডালের মধ্যে থেকে একটি পাসওয়ার্ড রিসেট মোডাল টগল করতে পারেন। অনুগ্রহ করে মনে রাখবেন একাধিক মডেল একই সময়ে খোলা যাবে না — এই পদ্ধতিটি কেবল দুটি পৃথক মডেলের মধ্যে টগল করে।

প্রথম মডেল খুলুন
<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>

অ্যানিমেশন পরিবর্তন করুন

ভেরিয়েবলটি মোডাল ফেইড-ইন অ্যানিমেশনের আগে $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.handleUpdate()একটি স্ক্রলবার উপস্থিত হওয়ার ক্ষেত্রে আপনাকে মোডেলের অবস্থান পুনরায় সামঞ্জস্য করতে কল করা উচিত।

অ্যাক্সেসযোগ্যতা

aria-labelledby="..."মডেল শিরোনাম উল্লেখ করে, যোগ করতে ভুলবেন না .modalaria-describedbyউপরন্তু, আপনি on এর সাথে আপনার মডেল ডায়ালগের একটি বিবরণ দিতে পারেন .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-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>

সস

ভেরিয়েবল

$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:        rgba($black, .2);
$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:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-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-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 {
        @include border-radius(0);
      }

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

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

ব্যবহার

মোডাল প্লাগইন ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে চাহিদা অনুযায়ী আপনার লুকানো বিষয়বস্তু টগল করে। এটি ডিফল্ট স্ক্রোলিং আচরণকেও ওভাররাইড করে এবং .modal-backdropমডেলের বাইরে ক্লিক করার সময় দেখানো মডেলগুলি খারিজ করার জন্য একটি ক্লিক এলাকা প্রদান করে।

ডেটা অ্যাট্রিবিউটের মাধ্যমে

টগল

জাভাস্ক্রিপ্ট না লিখে একটি মডেল সক্রিয় করুন। একটি বা 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 একটি বোতামের বৈশিষ্ট্য দিয়ে বরখাস্ত করা য��তে পারে :

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

অথবা নীচে প্রদর্শিত হিসাবে ব্যবহার করে মডেলের বাইরে একটি বোতামে data-bs-target:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
একটি মোডাল খারিজ করার উভয় উপায় সমর্থিত হলেও, মনে রাখবেন যে একটি মডেলের বাইরে থেকে খারিজ করা WAI-ARIA মডেল ডায়ালগ ডিজাইন প্যাটার্নের সাথে মেলে না সাথে মেলে না ৷ এটি আপনার নিজের ঝুঁকিতে করুন।

জাভাস্ক্রিপ্টের মাধ্যমে

জাভাস্ক্রিপ্টের একটি লাইন দিয়ে একটি মডেল তৈরি করুন:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

অপশন

বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন data-bs-, যেমনটি data-bs-backdrop=""

নাম টাইপ ডিফল্ট বর্ণনা
backdrop বুলিয়ান বা স্ট্রিং'static' true একটি মডেল-ব্যাকড্রপ উপাদান অন্তর্ভুক্ত। বিকল্পভাবে, staticএকটি পটভূমির জন্য নির্দিষ্ট করুন যা ক্লিকে মোডাল বন্ধ করে না।
keyboard বুলিয়ান true এস্কেপ কী চাপলে মোডাল বন্ধ করে
focus বুলিয়ান true আরম্ভ করার সময় মডেলের উপর ফোকাস রাখে।

পদ্ধতি

অ্যাসিঙ্ক্রোনাস পদ্ধতি এবং রূপান্তর

সমস্ত API পদ্ধতি অসিঙ্ক্রোনাস এবং একটি রূপান্তর শুরু করে । রূপান্তর শুরু হওয়ার সাথে সাথেই কিন্তু এটি শেষ হওয়ার আগেই তারা কলারের কাছে ফিরে আসে । উপরন্তু, একটি রূপান্তরকারী উপাদানের উপর একটি পদ্ধতি কল উপেক্ষা করা হবে

আরও তথ্যের জন্য আমাদের জাভাস্ক্রিপ্ট ডকুমেন্টেশন দেখুন

পাসিং বিকল্প

আপনার সামগ্রীকে একটি মডেল হিসাবে সক্রিয় করে। একটি ঐচ্ছিক বিকল্প গ্রহণ করে object

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

টগল

ম্যানুয়ালি একটি মডেল টগল করে। মডেলটি আসলে দেখানো বা লুকানোর আগে (অর্থাৎ ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে।shown.bs.modalhidden.bs.modal

myModal.toggle()

দেখান

ম্যানুয়ালি একটি মডেল খোলে। মডেলটি আসলে দেখানো হওয়ার আগে (অর্থাৎ ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে।shown.bs.modal

myModal.show()

এছাড়াও, আপনি একটি যুক্তি হিসাবে একটি DOM উপাদান পাস করতে পারেন যা মডেল ইভেন্টগুলিতে ( relatedTargetসম্পত্তি হিসাবে) পাওয়া যেতে পারে।

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

লুকান

ম্যানুয়ালি একটি মডেল লুকিয়ে রাখে। মডেলটি আসলে লুকানো হওয়ার আগে (অর্থাৎ ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে।hidden.bs.modal

myModal.hide()

হ্যান্ডেল আপডেট

ম্যানুয়ালি মোডালের অবস্থান পুনরায় সামঞ্জস্য করুন যদি একটি মোডেল খোলা থাকার সময় তার উচ্চতা পরিবর্তিত হয় (অর্থাৎ যদি একটি স্ক্রলবার উপস্থিত হয়)।

myModal.handleUpdate()

নিষ্পত্তি

একটি উপাদানের মডেল ধ্বংস করে। (DOM উপাদানে সঞ্চিত ডেটা সরিয়ে দেয়)

myModal.dispose()

getInstance

স্ট্যাটিক পদ্ধতি যা আপনাকে একটি DOM উপাদানের সাথে যুক্ত মডেল ইনস্ট্যান্স পেতে দেয়

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

getOrCreateInstance

স্ট্যাটিক পদ্ধতি যা আপনাকে একটি DOM এলিমেন্টের সাথে যুক্ত মোডাল ইনস্ট্যান্স পেতে বা এটি আরম্ভ না হলে একটি নতুন তৈরি করতে দেয়

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

ঘটনা

বুটস্ট্র্যাপের মডেল ক্লাস মোডাল কার্যকারিতার সাথে হুক করার জন্য কয়েকটি ইভেন্ট প্রকাশ করে। সমস্ত মডেল ইভেন্ট মডেল নিজেই (অর্থাৎ <div class="modal">) এ গুলি করা হয়।

ইভেন্টের ধরণ বর্ণনা
show.bs.modal এই ইভেন্টটি অবিলম্বে ফায়ার করে যখন showইনস্ট্যান্স পদ্ধতিটি কল করা হয়। যদি একটি ক্লিকের কারণে হয়, ক্লিক করা উপাদানটি relatedTargetইভেন্টের সম্পত্তি হিসাবে উপলব্ধ।
shown.bs.modal এই ইভেন্টটি বরখাস্ত করা হয় যখন মডেলটি ব্যবহারকারীর কাছে দৃশ্যমান করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। যদি একটি ক্লিকের কারণে হয়, ক্লিক করা উপাদানটি relatedTargetইভেন্টের সম্পত্তি হিসাবে উপলব্ধ।
hide.bs.modal এই ইভেন্টটি অবিলম্বে বহিস্কার করা হয় যখন hideউদাহরণ পদ্ধতিটি কল করা হয়।
hidden.bs.modal এই ইভেন্টটি বরখাস্ত করা হয় যখন মডেলটি ব্যবহারকারীর কাছ থেকে লুকানো শেষ হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)।
hidePrevented.bs.modal এই ইভেন্টটি গুলি করা হয় যখন মোডালটি দেখানো হয়, এর ব্যাকড্রপ হয় staticএবং মোডালের বাইরে একটি ক্লিক বা কীবোর্ড বিকল্পের সাথে একটি এস্কেপ কী প্রেস করা হয় বা data-bs-keyboardসেট করা হয় false
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})