লিখছেন সুদীপ্ত সাহা
জেক্যুয়েরি মোবাইল পপআপস
পপআপ হল অনেকটা বার্তার মতো, যেগুলো একটি পেজের কোন অংশের ওপর দিয়ে আস্তরনের মতো বিস্তৃত হয়। ছোট কোন টেক্সট, ইমেজ, ম্যাপ বা অন্য কোন কন্টেন্ট প্রদর্শনের জন্য পপআপ বক্স উপযোগী।
পপআপ তৈরি করার জন্য ইলিমেন্ট এবং
ইঙ্গিতঃ পপআপের
উদাহরনঃ
Show Popup
This is a simple popup.
আপনার পপআপ বক্সে অতিরিক্ত প্যাডিং বা মার্জিন অ্যাট্রিবিউট ব্যবহার করতে চাইলে
উদাহরনঃ
পপআপ ক্লোজিং
পপআপ বক্সের বাইরে ক্লিক করলে অথবা “Esc” কী প্রেস করলে স্বয়ংক্রিয়ভাবে একটি পপআপ শেষ হয়ে যায় বা বন্ধ হয়ে যায়। কিন্তু পপআপ বক্সের বাইরে ক্লিক করলে পপআপ বন্ধ হয়ে যাবে, এরকম যদি আপনি না চান তাহলে আপনি পপআপে অ্যাট্রিবিউট data-dismissible="false" অ্যাড করতে পারেন (প্রয়োজনীয় নয়)। পপআপের ডানে অথবা বামে অথবা অন্য কোন দিকে আপনি একটি ক্লোজ বাটনও অ্যাড করতে পারেন। এর জন্য পপআপ কন্টেইনারে বাটন লিঙ্ক অ্যাট্রিবিউট data-rel="back" অ্যাড করতে হবে এবং বাটনের অবস্থান সিএসএস ক্লাসে নির্দিষ্ট করে দিতে হবে।
রাইট ক্লোজ বাটনের উদাহরনঃ
Show Popup
লেফট ক্লোজ বাটনের উদাহরনঃ
Show Popup
আনডিসমিসেবল পপআপের উদাহরনঃ
Show Popup
পজিশনিং পপআপ
পপআপগুলো স্বয়ংক্রিয়ভাবে একেবারে ক্লিকড ইলিমেন্টের উপরেই প্রদর্শিত হয়। কিন্তু পপআপের অবস্থান নিয়ন্ত্রণের জন্য যেই লিঙ্ক পপআপ ওপেনের জন্য ব্যবহৃত হবে সেই লিঙ্কে data-position-to অ্যাট্রিবিউট ব্যবহার করতে হয়।
পপআপের অবস্থান নিয়ন্ত্রণের তিনটি পদ্ধতি হলঃ
অ্যাট্রিবিউট ভ্যালু বর্ণনা
data-position-to="window" পপআপ উইন্ডোর মাঝে প্রদর্শিত হবে
data-position-to="#myId" কোন নির্দিষ্ট id’র বর্ণনার অবস্থান অনুসারে পপআপ প্রদর্শিত হবে
data-position-to="origin" ডিফল্ট পপআপ সরাসরিভাবে ক্লিকড ইলিমেন্টের উপর প্রদর্শিত হবে
উদাহরনঃ
Window
id="demo"
Origin
ট্রানজিশনস
পপআপের সাথে স্বয়ংক্রিয়ভাবে কোন ট্রানজিশন ইফেক্ট অ্যাড করা থাকে না। ট্রানজিশন চ্যাপ্টারে বর্ণিত ইফেক্টগুলোর যেকোনোটি আপনি ব্যবহার করতে পারেন। শুধুমাত্র যেই লিঙ্ক পপআপ ওপেনের জন্য ব্যবহৃত হবে সেই লিঙ্কে data-transition="value" অ্যাট্রিবিউট অ্যাড করতে হবে।
সকল ট্রানজিশন ইফেক্টের জন্য একটি ড্যামো দেখানো হলঃ
Fade
পপআপ অ্যারো
পপআপের বর্ডারের মধ্যে কোন অ্যারো ব্যবহারের জন্য data-arrow অ্যাট্রিবিউট অ্যাড করতে হয় এবং লেফট এর জন্য “l” রাইটের জন্য “r” টপের জন্য “t” বোটমের জন্য “b” নির্দিষ্ট করে দিতে হয়।
উদাহরনঃ
Open Popup
There is an arrow on my LEFT border.
পপআপ ডায়ালগ
আপনি একটি মানসম্মত বা পছন্দস্বরূপ কোন ডায়ালগ আপনার পপআপে অ্যাড করতে পারেন (হেডার, ফুটার এবং কন্টেন্ট মার্কআপ)
উদাহরনঃ
Open Dialog Popup
Header Text..
পপআপ ফটো
পপআপে কোন ইমেজও প্রদর্শন করতে পারবেন।
উদাহরনঃ
