বুটস্ট্রাপ মোডাল প্লাগ-ইন হলো ডায়ালগ বক্স/পপ-আপ উইন্ডো যা বর্তমান পেজের উপরে প্রদর্শিত হয়ঃ
কিভাবে একটি বেসিক মোডাল তৈরি করা যায় তা নিম্নলিখিত উদাহরণে দেখানো হলোঃ
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
আরও দেখুন...