Bootstrap 5 মডাল

মোডাল

Modal কম্পোনেন্ট একটি ডায়লগ/প্রমাণপত্র, যা বর্তমান পৃষ্ঠার উপরে দেখা যায়:

মড্যাল কিভাবে তৈরি করা যায়

নিম্নরূপে মূলতন্ত্রকে সৃষ্টি করার উদাহরণ দেওয়া হল:

প্রকল্প

<!-- মড্যাল খুলানোর বটন -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  মড্যাল খুলুন
</button>
<!-- মড্যাল -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- মড্যাল শিরোনাম -->
      <div class="modal-header">
        <h4 class="modal-title">মড্যাল শিরোনাম</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <!-- মড্যাল মূলবস্তু -->
      <div class="modal-body">
        মড্যাল মূলবস্তু ..
      </div>
      <!-- মড্যাল পাদ -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">বন্ধ করুন</button>
      </div>
    </div>
  </div>
</div>

আপনার নিজেই প্রয়াস করুন

এনিমেশন যোগ করুন

অনুগ্রহ করে .fade শ্রেণীটি মড্যালকে খুলে এবং বন্ধ করার সময় ফেডিং এফেক্ট যোগ করুন

প্রকল্প

<!-- ফেডিং মড্যাল -->
<div class="modal fade"></div>
<!-- মড্যাল বিনা এনিমেশন -->
<div class="modal"></div>

আপনার নিজেই প্রয়াস করুন

মড্যাল মাপ

ছোট মড্যাল যোগ করে .modal-sm শ্রেণী (মাক্স-হেডওয়াইড 300পিক্সেল) বড় মড্যাল যোগ করুন .modal-lg শ্রেণী (মাক্স-হেডওয়াইড 800পিক্সেল) বা অত্যধিক বড় মড্যাল যোগ করুন .modal-xl মড্যালের মাপ পরিবর্তন করুন (মাক্স-হেডওয়াইড 1140 পিক্সেল)।ডিফল্ট মাক্স-হেডওয়াইড 500 পিক্সেল

অনুগ্রহ করে .modal-dialog শ্রেণী এবং মাপ শ্রেণীগুলো একসঙ্গে যোগ করুন <div> তত্ত্বঃ

ছোট মড্যাল

<div class="modal-dialog modal-sm">

আপনার নিজেই প্রয়াস করুন

বড় মড্যাল

<div class="modal-dialog modal-lg">

আপনার নিজেই প্রয়াস করুন

এক্সট্রা লার্জ মোডাল

<div class="modal-dialog modal-xl">

আপনার নিজেই প্রয়াস করুন

ডিফল্টে, মোডালের মাপ "মিডিয়াম" (500px মাক্সিমাম প্রস্থ) হয়。

পূর্ণ স্ক্রিন মোডাল

যদি আপনি চান যে মোডাল পৃষ্ঠার সমগ্র প্রস্থ এবং উচ্চতা ভ্রাম্যমান থাকে, তবে .modal-fullscreen শ্রেণী:

প্রকল্প

<div class="modal-dialog modal-fullscreen">

আপনার নিজেই প্রয়াস করুন

রেসপনসিভ পূর্ণ স্ক্রিন মোডাল

আপনি এছাড়াও .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 এর নিচে পূর্ণ স্ক্রিন আপনার নিজেই প্রয়াস করুন

কেন্দ্রীভূত মোডাল

যোগাযোগ করে .modal-dialog-centric শ্রেণী, পৃষ্ঠার মধ্যে উচ্চ এবং প্রস্থায় মোডালকে কেন্দ্রীভূত করুন:

প্রকল্প

<div class="modal-dialog modal-dialog-centered">

আপনার নিজেই প্রয়াস করুন

সরবরাহযোগ্য মোডাল

যখন মোডালে অনেক কনটেন্ট থাকে, তখন পৃষ্ঠাকে একটি সরবরাহ ট্যাব যোগ করা হয়। নিচের উদাহরণ দেখে বোঝুন:

প্রকল্প

<div class="modal-dialog">

আপনার নিজেই প্রয়াস করুন

কিন্তু, .modal-dialog-scrollable যোগ করুন .modal-dialog মোডালের মধ্যেই সরবরাহ করা যেতে পারে, না তো পৃষ্ঠার নিজেই:

প্রকল্প

<div class="modal-dialog modal-dialog-scrollable">

আপনার নিজেই প্রয়াস করুন