বুটস্ট্রাপ JS মোডাল (modal.js)
বুটস্ট্রাপ মোডাল প্লাগ-ইন হলো একটি ডায়ালগ বক্স/পপ-আপ উইন্ডো, যা বর্তমান পেজের উপরের অংশে প্রদর্শিত হয়।
বুটস্ট্রাপ মোডালের টিউটোরিয়ালের জন্য, আমাদের বুটস্ট্রাপ মোডাল টিউটোরিয়ালটি পড়ুন।
বুটস্ট্রাপ মোডাল প্লাগ-ইন ক্লাসসমূহ
| ক্লাস | বিবরণ |
|---|---|
.modal | একটি মোডাল তৈরি করে। |
.modal-content | মোডালকে বর্ডার, ব্যাকগ্রাউন্ড-কালার ইত্যাদির মাধ্যমে যথাযথ ভাবে স্টাইল করে। মোডালের হেডার, বডি এবং ফুটার যুক্ত করার জন্য এই ক্লাসটি ব্যবহার করুন। |
.modal-header | মোডালের হেডারের জন্য স্টাইল ডিফাইন করে। |
.modal-body | মোডালের বডির জন্য স্টাইল ডিফাইন করে। |
.modal-footer | মোডালের ফুটারের জন্য স্টাইল ডিফাইন করে। নোটঃ এই এরিয়াটি ডিফল্টভাবে ডানে এ্যালাইন করা থাকে। এটাকে ওভেরর-াইট করার জন্য সিএসএসের text-align:"left/center" প্রপার্টি ব্যবহার করুন। |
.modal-sm | ছোট মোডাল তৈরি করার জন্য ব্যবহার করা হয়। |
.modal-lg | বড় মোডাল তৈরি করার জন্য ব্যবহার করা হয়। |
.fade | মোডালে ফেড ইন এবং ফেড আউট এনিমশন/ট্রানজিশন ইফেক্ট যুক্ত করে। |
বুটস্ট্রাপ data-* এট্রিবিউটের মাধ্যমে মোডাল ট্রিগার
যেকোনো একটি এলিমেন্টে data-toggle="modal" এবং data-target="#modalID" যুক্ত করুন।
নোটঃ এলিমেন্টে data-target এট্রিবিউটটি বাদ দিন এবং তার পরিবর্তে href="#modalID" ব্যবহার করুনঃ
kt_satt_skill_example_id=1320
জাভাস্ক্রিপ্টের মাধ্যমে ট্রিগার
ম্যানুয়েললি যুক্ত করার জন্যঃ
kt_satt_skill_example_id=1321
বুটস্ট্রাপ মোডাল অপশন
অপশন data এট্রিবিউট অথবা জাভাস্ক্রিপ্টের মাধ্যমে অতিক্রম করতে পারে। data এট্রিবিউটের ক্ষেত্রে, অপশনের নাম "data-" সাথে যুক্ত করুন। যেমন; data-keyboard=""
| নাম | ধরন | ডিফল্ট | বিবরণ | উদাহরণ |
|---|---|---|---|---|
backdrop | boolean অথবা স্ট্রিং "static" | true | মোডালে একটি ধূসর ওভারলে থাকতে হবে কিনা তা নির্দিষ্ট করে।
আপনি যদি ভ্যালু | JS/data উদাহরণ |
keyboard | boolean | true |
| JS/data উদাহরণ |
show | boolean | true | মোডাল আরম্ভ হওয়ার সময় প্রদর্শিত হবে কিনা তা নির্দিষ্ট করে। |
বুটস্ট্রাপ মোডাল মেথড
নিচের টেবিলে মোডাল মেথডগুলো দেয়া হলো।
| মেথড | বিবরণ | উদাহরণ |
|---|---|---|
.modal(options) | মোডালকে কন্টেন্ট হিসেবে সক্রিয় করে। ভ্যালিড ভ্যালুর জন্য উপরের অপশন দেখুন। | |
.modal("toggle") | মোডালকে টোগল করে। | উদাহরণ দেখুন |
.modal("show") | মোডালকে ওপেন করে। | উদাহরণ দেখুন |
.modal("hide") | মোডালকে হাইড করে। | উদাহরণ দেখুন |
বুটস্ট্রাপ মোডাল ইভেন্ট
নিচের টেবিলের মোডাল ইভেন্টগুলো দেয়া হলো।
| ইভেন্ট | বিবরণ | উদাহরণ |
|---|---|---|
show.bs.modal | মোডালটি যখন প্রদর্শিত হয় তখন ঘটে। | উদাহরণ দেখুন |
shown.bs.modal | মোডালটি প্রদর্শিত হওয়ার পর ঘটে। (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার পর) | উদাহরণ দেখুন |
hide.bs.modal | মোডালটি যখন হাইড হয় তখন ঘটে। | উদাহরণ দেখুন |
hidden.bs.modal | মোডালটি হাইড হওয়ার পর ঘটে। (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার পর) | উদাহরণ দেখুন |
উদাহরণ
বুটস্ট্রাপ লগ-ইন মোডাল
নিচের উদাহরণে লগ-ইনের জন্য একটি মোডাল তৈরি করা হলোঃ
kt_satt_skill_example_id=1322
আরও দেখুন...
Download Our Mobile Apps
