Bootstrap Modal

---

📘 Bootstrap Modal  (Bootstrap 5 ভিত্তিক)

🔹 Modal কী?

Modal একটি পপ-আপ ডায়ালগ বক্স যা ইউজার স্ক্রিনে ভেসে ওঠে। এটি সাধারণত নোটিশ, ফর্ম, কনফার্মেশন মেসেজ, বা অন্য কোনো কনটেন্ট দেখাতে ব্যবহৃত হয়।

---

🔹 Modal তৈরির জন্য HTML স্ট্রাকচার:

<!-- Trigger Button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open Modal
</button>

<!-- Modal Structure -->
<div class="modal" id="myModal" data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
    
      <!-- Modal Header -->
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Modal Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      
      <!-- Modal Body -->
      <div class="modal-body">
        Modal body content goes here...
      </div>
      
      <!-- Modal Footer -->
      <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>

---

🔹 Modal চালু করার উপায়:

✅ ডেটা অ্যাট্রিবিউট দিয়ে:

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

✅ JavaScript দিয়ে:

var myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal.show();

---

🔹 Modal বন্ধ করার উপায়:

✅ ডেটা অ্যাট্রিবিউট দিয়ে:

<button data-bs-dismiss="modal">Close</button>

✅ JavaScript দিয়ে:

myModal.hide();

---

🔹 Modal এর কাস্টমাইজেশন:

১. বড় Modal:

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

২. ছোট Modal:

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

৩. Vertically Centered Modal:

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

---

🔹 Modal ইভেন্টসমূহ (JavaScript):

var myModalEl = document.getElementById('myModal');

myModalEl.addEventListener('shown.bs.modal', function () {
  console.log("Modal is now visible");
});

myModalEl.addEventListener('hidden.bs.modal', function () {
  console.log("Modal is now hidden");
});

---

🔹 Modal ব্যবহার করার কিছু টিপস:

1. Modal এর ভিতরের ফর্ম সাবমিট করার পরে Modal নিজে থেকে বন্ধ হয় না। সেটি ম্যানুয়ালি করতে হয়।

2. Modal এর ভিতরে Scrollable Content চাইলে:

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

---

📚 bootstrap.Modal ক্লাস ডকুমেন্টেশন

🔹 ১. Constructor (ইনস্ট্যান্স তৈরি):

var modal = new bootstrap.Modal(element, options);

🔸 element:

Modal এর DOM এলিমেন্ট (যেমন document.getElementById('myModal'))

🔸 options (ঐচ্ছিক):

একটি অবজেক্ট যেখানে কিছু কাস্টম কনফিগারেশন দেওয়া যায়। যেমন:

{ backdrop: true, keyboard: true, focus: true }

---

🔹 ২. Modal এর মেথডসমূহ:

Method	Description (ব্যাখ্যা)
show()	Modal দেখায়
hide()	Modal বন্ধ করে
toggle()	Modal খুলে থাকলে বন্ধ করে, বন্ধ থাকলে খুলে
handleUpdate()	যদি DOM পরিবর্তন হয়, তাহলে modal-এর পজিশন আপডেট করে
dispose()	Modal destroy করে ও Event listener গুলো remove করে

উদাহরণ:

const modalEl = document.getElementById('myModal');
const myModal = new bootstrap.Modal(modalEl);

myModal.show();  // দেখাবে
myModal.hide();  // বন্ধ করবে

---

🔹 ৩. Options (কনফিগারেশন):

Option	Default	Description
backdrop	true	ক্লিক করলে Modal এর বাইরের এলাকা কাজ করবে কি না ('static' দিলে ক্লোজ হবে না)
keyboard	true	Escape key চাপলে Modal বন্ধ হবে কিনা
focus	true	Modal চালু হলে অটো-ফোকাস হবে কিনা

উদাহরণ:

new bootstrap.Modal(modalEl, {
  backdrop: 'static',
  keyboard: false
});

---

🔹 ৪. Static Method: getInstance

const instance = bootstrap.Modal.getInstance(modalEl);

👉 এটি দিয়ে তুমি আগে থেকে তৈরি করা Modal এর ইনস্ট্যান্স খুঁজে বের করতে পারো।

---

🔹 ৫. Modal Events (ইভেন্ট):

Event Name	Triggered When...
show.bs.modal	Modal দেখানোর আগে
shown.bs.modal	Modal দেখানোর পরে
hide.bs.modal	Modal বন্ধ করার আগে
hidden.bs.modal	Modal বন্ধ হওয়ার পরে
hidePrevented.bs.modal	backdrop: 'static' থাকলে Escape/Backdrop block হলে

উদাহরণ:

modalEl.addEventListener('shown.bs.modal', function () {
  console.log('Modal now visible!');
});

---

✅ সম্পূর্ণ উদাহরণ:

<button class="btn btn-primary" id="openModal">Open Modal</button>

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Hello Modal</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        Welcome to Bootstrap Modal!
      </div>
    </div>
  </div>
</div>

<script>
  const modalEl = document.getElementById('myModal');
  const modal = new bootstrap.Modal(modalEl, {
    backdrop: 'static',
    keyboard: false
  });

  document.getElementById('openModal').addEventListener('click', () => {
    modal.show();
  });
</script>