বুটস্ট্রাপ৩ মডাল (Bootstrap3 Modal)

বুটস্ট্রাপ মোডাল প্লাগ-ইন

বুটস্ট্রাপ মোডাল প্লাগ-ইন হলো ডায়ালগ বক্স/পপ-আপ উইন্ডো যা বর্তমান পেজের উপরে প্রদর্শিত হয়ঃ

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
 ওপেন করতে মডাল এ ক্লিক করুন 
</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">
       <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
       <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>

কিভাবে মোডাল তৈরি করবেন?

কিভাবে একটি বেসিক মোডাল তৈরি করা যায় তা নিম্নলিখিত উদাহরণে দেখানো হলোঃ

kt_satt_skill_example_id=1167

উদাহরণের ব্যাখ্যা

"ট্রিগার" পার্টঃ

মোডাল উইন্ডোকে ট্রিগার করার জন্য, আপনাকে অবশ্যই একটি বাটন বা লিংক ব্যবহার করতে হবে।

তারপর বাটন বা লিংকের মধ্যে নিম্নলিখিত দুটি data-* এট্রিবিউট অন্তর্ভুক্ত করুনঃ

• data-toggle="modal" এটি মোডাল উইন্ডো ওপেন করে
• data-target="#myModal" এটির মাধ্যমে মোডালের আইডিকে লক্ষ্য করা হয়

"মোডাল" পার্টঃ

মোডালের পেরেন্ট < div > এ অবশ্যই একটি আইডি থাকতে হবে এবং এর ভ্যালু অবশ্যই data-target এট্রিবিউটের মতো হবে, যেটি মোডালকে ট্রিগার করার জন্য ব্যবহার করা হয় ("myModal")।

.modal ক্লাস < div > এলিমেন্টের কন্টেন্টকে মোডাল হিসেবে আইডেন্টিফাই করে এবং এর মধ্যে ফোকাস তৈরি করে।

.fade ক্লাসের মাধ্যমে মোডালে ট্রানজিশন এফেক্ট যুক্ত করা হয়েছে। আপনি চাইলে এই ক্লাসটি বাদ দিতে পারেন।

role="dialog" এট্রিবিউটটি ব্যবহার করা হয় স্ক্রিন রিডারদের এক্সেসিবিলিটি ইম্প্রুভ করার জন্য।

.modal-dialog ক্লাসের মাধ্যমে মোডালের জন্য যথাযথ প্রস্থ এবং মার্জিন নিশ্চিত করা হয়।

"মোডাল কন্টেন্ট" পার্টঃ

class="modal-content" যুক্ত < div > এলিমেন্ট মোডালকে স্টাইল (border, background-color, etc.) করে। এই < div > এলিমেন্টের মধ্যেই মোডাল হেডার, মোডাল বডি এবং মোডাল ফুটার যুক্ত করতে হবে।

মোডালের হেডারকে স্টাইল করার জন্য .modal-header ক্লাস ব্যবহার করা হয়। হেডারের < button > এলিমেন্টের মধ্যে data-dismiss="modal" এট্রিবিউট থাকে যেটিতে ক্লিক করে মোডালটি ক্লোজ করা যায়। .close ক্লাসটি ক্লোজ বাটনকে স্টাইল করে এবং .modal-title ক্লাসটি মোডাল হেডারকে যথাযথ লাইন উচ্চতাসহকারে স্টাইল করে।

মোডালের বডিকে স্টাইল করার জন্য .modal-body ক্লাস ব্যবহার করা হয়। হেডারের মধ্যে আপনার প্রয়োজন মতো এইচটিএমএল মার্কআপ ট্যাগ ব্যবহার করতে পারেবেন। যেমন; প্যারাগ্রাফ, ইমেজ, ভিডিও ইত্যাদি।

মোডালের ফুটারকে স্টাইল করার জন্য .modal-footer ক্লাস ব্যবহার করা হয়। মনে রাখবেন এই অংশটি ডিফল্টভাবে ডানে এ্যালাইন অবস্থায় থাকে।

মোডালের আকার

ছোট আকারের মোডালের জন্য .modal-sm ক্লাস এবং বড় আকারের মোডালের জন্য .modal-lg ক্লাস ব্যবহার করুন।

মোডালের আকার নির্ধারণের জন্য সাইজ ক্লাস গুলো .modal-dialog ক্লাস যুক্ত  < div > এলিমেন্টের মধ্যে ব্যবহার করুনঃ

ছোট আকারঃ 

kt_satt_skill_example_id=1168

বড় আকারঃ 

kt_satt_skill_example_id=1169