Modals তৈরি এবং Customization

Modals হল এমন একটি পপ-আপ উইন্ডো যা সাধারণত ওয়েব পেজের মধ্যে কোন নির্দিষ্ট তথ্য, ফর্ম বা কনটেন্ট প্রদর্শন করতে ব্যবহৃত হয়, যা ব্যবহারকারীকে মূল কনটেন্টের সাথে আলাদা ভাবে দেখানো হয়। Foundation ফ্রেমওয়ার্কে Modals অত্যন্ত সহজ এবং দ্রুত তৈরি করা যায়, এবং এগুলিকে কাস্টমাইজ করারও বেশ কিছু বিকল্প রয়েছে।

Foundation এ Modals তৈরি এবং কাস্টমাইজ করা সহজ, এবং এর জন্য Reveal নামক একটি ফিচার ব্যবহার করা হয়। এটি একটি JavaScript প্লাগইন, যা সহজেই কার্যকরী মডাল উইন্ডো তৈরি করতে সহায়তা করে।

১. Modals তৈরি করা

Foundation এ একটি মডাল তৈরি করার জন্য নিচে দেয়া ধাপগুলো অনুসরণ করুন:

মডাল HTML স্ট্রাকচার:

<!-- Trigger Button -->
<button class="button" data-open="myModal">Open Modal</button>

<!-- Modal -->
<div class="reveal" id="myModal" data-reveal>
  <h1>Welcome to the Modal!</h1>
  <p>This is a simple modal using Foundation's Reveal plugin.</p>
  <button class="button" data-close>Close</button>
</div>

এখানে:

• data-open: মডালটি খুলতে ব্যবহৃত বাটন। এই বাটনে ক্লিক করলে মডালটি খোলা হবে।
• reveal: এটি মডাল উইন্ডোর জন্য একটি ফাউন্ডেশন ক্লাস।
• data-reveal: মডাল উইন্ডোকে চিহ্নিত করে, যা Foundation এর Reveal প্লাগইন দ্বারা পরিচালিত হয়।
• data-close: মডাল বন্ধ করার জন্য ব্যবহৃত ক্লাস। এটি মডাল উইন্ডো বন্ধ করতে সাহায্য করবে।

উদাহরণে:

• <button class="button" data-open="myModal">Open Modal</button>: এই বাটনে ক্লিক করলে myModal আইডির মডাল উইন্ডোটি খোলা হবে।
• <div class="reveal" id="myModal" data-reveal>: এটি মূল মডাল উইন্ডো যা একটি শিরোনাম (h1), প্যারাগ্রাফ (p), এবং ক্লোজ বাটন (button) ধারণ করবে।

২. Modals-এ JavaScript ব্যবহার

Foundation এর Reveal প্লাগইন JavaScript দ্বারা পরিচালিত হয়। একে ইনিশিয়ালাইজ করতে Foundation এর JavaScript ফাইল লোড করতে হয়। এর জন্য jQuery এবং Foundation এর JavaScript ফাইল প্রয়োজন।

Foundation JavaScript এবং jQuery সঠিকভাবে লোড করার জন্য নিম্নলিখিত কোডটি আপনার HTML ডকুমেন্টের মধ্যে যুক্ত করুন:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Foundation JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js"></script>

<script>
  $(document).foundation();
</script>

এটি Foundation এর Reveal প্লাগইন এবং অন্যান্য ফিচার কাজ করার জন্য যথাযথভাবে ইনিশিয়ালাইজ করবে।

৩. Modals কাস্টমাইজেশন

Foundation এ Modals কাস্টমাইজ করার অনেক উপায় রয়েছে, যেমন মডালের আকার, প্রস্থ, এনিমেশন, এবং কন্টেন্ট পরিবর্তন করা।

কাস্টম সাইজ এবং স্টাইল:

Foundation-এ মডাল উইন্ডোর আকার কাস্টমাইজ করা খুব সহজ। এর জন্য small, medium, large, full ক্লাস ব্যবহার করা হয়।

<!-- Small Modal -->
<div class="reveal small" id="smallModal" data-reveal>
  <h1>Small Modal</h1>
  <p>This is a small modal example.</p>
  <button class="button" data-close>Close</button>
</div>

<!-- Large Modal -->
<div class="reveal large" id="largeModal" data-reveal>
  <h1>Large Modal</h1>
  <p>This is a large modal example.</p>
  <button class="button" data-close>Close</button>
</div>

এখানে:

• small: ছোট আকারের মডাল উইন্ডো।
• large: বড় আকারের মডাল উইন্ডো।

Foundation এর ডিফল্ট সাইজের বাইরে full ক্লাস ব্যবহার করে পুরো স্ক্রীন মডাল তৈরি করা যায়।

মডালটিতে এনিমেশন যুক্ত করা:

Foundation এর Reveal প্লাগইনে fade ক্লাস যুক্ত করলে মডালটি ধীরে ধীরে প্রদর্শিত হয়।

<div class="reveal fade" id="animatedModal" data-reveal>
  <h1>Animated Modal</h1>
  <p>This modal will fade in when opened.</p>
  <button class="button" data-close>Close</button>
</div>

এখানে:

• fade: এটি মডাল উইন্ডোতে ফেড ইন বা আউট এনিমেশন যোগ করবে।

ক্লোজ বাটনে কাস্টমাইজেশন:

Foundation মডালের ক্লোজ বাটনটি data-close ক্লাস দ্বারা পরিচালিত হয়। আপনি এটি কাস্টমাইজ করতে পারেন, যেমন রঙ পরিবর্তন বা আকার পরিবর্তন।

<button class="button alert" data-close>Close</button>

এখানে, ক্লোজ বাটনের রঙ পরিবর্তন করা হয়েছে alert ক্লাস ব্যবহার করে।

৪. Modals এর কাস্টম বৈশিষ্ট্য

Foundation এর Reveal প্লাগইন কিছু অতিরিক্ত কাস্টম বৈশিষ্ট্যও প্রদান করে:

• data-close ক্লাস ব্যবহার করে মডালটি বন্ধ করা যায়।
• auto-focus বৈশিষ্ট্য ব্যবহার করে মডালের ভিতরের প্রথম ইনপুট এলিমেন্টে ফোকাস দেওয়া যায়।
• close-on-click ফিচারটি ব্যবহার করে মডালের বাইরের অংশে ক্লিক করলে মডালটি বন্ধ হয়ে যাবে।

উদাহরণ:

<div class="reveal" id="myModal" data-reveal data-close-on-click="true">
  <h1>Auto-close Modal</h1>
  <p>Click outside the modal to close it.</p>
  <button class="button" data-close>Close</button>
</div>

এখানে:

• data-close-on-click="true": মডালের বাইরের অংশে ক্লিক করলে এটি স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যাবে।

Foundation ফ্রেমওয়ার্কের Modals তৈরি করা এবং কাস্টমাইজেশন করা খুবই সহজ এবং কার্যকর। এর Reveal প্লাগইন ব্যবহার করে আপনি মডাল উইন্ডো তৈরি করতে পারেন এবং সেটি কাস্টমাইজ করতে পারেন। Modals বিভিন্ন আকার, এনিমেশন, এবং কাস্টম ফিচারের সাথে আপনার ওয়েবসাইটে উন্নত এবং পেশাদার ইন্টারফেস প্রদান করে। Foundation এর মডাল সিস্টেম সহজ, কার্যকরী এবং রেসপনসিভ ডিজাইনের জন্য উপযুক্ত।