Modal Component তৈরি এবং কনফিগার করা

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

১. Modal Component Structure

Bulma Modal কম্পোনেন্ট একটি বেসিক HTML কাঠামোতে তৈরি করা হয়। এটি সাধারণত তিনটি মূল অংশে বিভক্ত:

1. Modal background: পপ-আপ উইন্ডোর ব্যাকগ্রাউন্ড (যা উইন্ডোটিকে ঘিরে রাখে)।
2. Modal content: মূল কনটেন্ট অংশ (যেখানে আপনার টেক্সট বা অন্যান্য উপাদান থাকে)।
3. Modal close button: মোডাল উইন্ডো বন্ধ করার জন্য একটি ক্লোজ বাটন।

বেসিক Modal উদাহরণ:

<!-- Trigger Button -->
<button class="button is-primary" id="openModal">Open Modal</button>

<!-- Modal -->
<div class="modal" id="myModal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <h1 class="title">Modal Title</h1>
      <p>This is the modal content. You can put any content here.</p>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close" id="closeModal"></button>
</div>

<script>
  // JavaScript to handle modal open and close actions
  document.getElementById('openModal').addEventListener('click', function() {
    document.getElementById('myModal').classList.add('is-active');
  });

  document.getElementById('closeModal').addEventListener('click', function() {
    document.getElementById('myModal').classList.remove('is-active');
  });
</script>

Modal এর বিভিন্ন অংশ ব্যাখ্যা:

1. modal: মূল মোডাল উইন্ডো, যা .is-active ক্লাস ব্যবহার করে প্রদর্শিত হয়। যখন ক্লাসটি যোগ করা হয়, তখন এটি স্ক্রীনে প্রদর্শিত হয়।
2. modal-background: এই অংশটি ব্যাকগ্রাউন্ডকে হালকা করে রাখে যাতে ব্যবহারকারী পপ-আপ উইন্ডোর বাইরে ক্লিক করতে না পারে। এটি সাদা বা অন্ধকার ছায়া দিতে সাহায্য করে।
3. modal-content: এখানে আপনার মূল কনটেন্ট বা উপাদান থাকবে যেমন টেক্সট, ছবি, ফর্ম ইত্যাদি।
4. modal-close is-large: মোডাল উইন্ডো বন্ধ করার জন্য ক্লোজ বাটন, যা মোডাল থেকে is-active ক্লাস মুছে ফেলতে সহায়তা করে।

২. Modal Configuration (কনফিগারেশন)

Bulma Modal কম্পোনেন্ট কনফিগার করার মাধ্যমে আপনি এর আকার, স্টাইল এবং আচরণ পরিবর্তন করতে পারেন। আপনি মোডাল উইন্ডোকে সাধারণ আকার, মাঝারি আকার বা বড় আকারে কনফিগার করতে পারেন।

Modal এর আকার কনফিগার করা

1. Normal Size (সাধারণ আকার):

<div class="modal is-active">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <h1 class="title">Normal Modal</h1>
      <p>This is the content of a normal size modal.</p>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

2. Medium Size (মাঝারি আকার):

<div class="modal is-active">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <h1 class="title">Medium Modal</h1>
      <p>This modal is of medium size.</p>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

এখানে modal-content ক্লাসে Bulma কোনো নির্দিষ্ট আকার সরাসরি প্রদান করে না, তবে আপনি is-small, is-medium, is-large ক্লাস ব্যবহার করে মোডালের আকার পরিবর্তন করতে পারেন।

3. Large Size (বড় আকার):

<div class="modal is-active">
  <div class="modal-background"></div>
  <div class="modal-content is-large">
    <div class="box">
      <h1 class="title">Large Modal</h1>
      <p>This modal is large and can hold more content.</p>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

এখানে is-large ক্লাসটি মোডালের আকার বড় করে দেয়।

৩. Modal এর কাস্টম স্টাইল

Bulma তে মোডাল কাস্টমাইজেশন সহজ। আপনি CSS ব্যবহার করে মোডালের ব্যাকগ্রাউন্ড, কনটেন্ট, বর্ডার ইত্যাদি কাস্টমাইজ করতে পারেন।

কাস্টম স্টাইল উদাহরণ:

<style>
  .modal-content {
    max-width: 80%; /* Modal content width */
    margin: 0 auto;
  }
  .modal-background {
    background-color: rgba(0, 0, 0, 0.5); /* Darken background */
  }
  .modal-close {
    color: #ff0000; /* Red color for close button */
  }
</style>

<!-- Modal -->
<div class="modal is-active">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <h1 class="title">Custom Modal</h1>
      <p>This modal has custom styling.</p>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

এখানে:

• modal-content ক্লাসের মাধ্যমে মোডালের কনটেন্টের প্রস্থ নির্ধারণ করা হয়েছে।
• modal-background এর ব্যাকগ্রাউন্ড কালার সামান্য ডার্ক করা হয়েছে।
• modal-close বাটনের রঙ পরিবর্তন করা হয়েছে।

৪. Modal এর অটো ক্লোজ

আপনি চাইলে মোডালকে কিছু নির্দিষ্ট সময় পর অটো ক্লোজও করতে পারেন। নিচের উদাহরণে মোডাল উইন্ডো ৫ সেকেন্ড পর অটো ক্লোজ হবে।

অটো ক্লোজ উদাহরণ:

<script>
  // Automatically close modal after 5 seconds
  setTimeout(function() {
    document.getElementById('myModal').classList.remove('is-active');
  }, 5000);
</script>

এখানে setTimeout() ফাংশনটি ব্যবহার করা হয়েছে যা ৫ সেকেন্ড পর মোডালকে বন্ধ করে দেয়।

৫. Modal এর স্লাইডিং ইফেক্ট

Bulma তে মোডাল উইন্ডোর মধ্যে স্লাইডিং ইফেক্ট যোগ করতে CSS বা জাভাস্ক্রিপ্ট ব্যবহার করা যায়। নিচে একটি স্লাইডিং মোডাল উদাহরণ দেয়া হয়েছে।

স্লাইডিং মোডাল উদাহরণ:

<style>
  .modal {
    transition: transform 0.3s ease-in-out;
    transform: translateY(-100%);
  }
  .modal.is-active {
    transform: translateY(0);
  }
</style>

<!-- Trigger and Modal -->
<button class="button is-primary" id="openModal">Open Sliding Modal</button>

<div class="modal" id="myModal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <h1 class="title">Sliding Modal</h1>
      <p>This modal slides down from the top.</p>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close" id="closeModal"></button>
</div>

<script>
  document.getElementById('openModal').addEventListener('click', function() {
    document.getElementById('myModal').classList.add('is-active');
  });

  document.getElementById('closeModal').addEventListener('click', function() {
    document.getElementById('myModal').classList.remove('is-active');
  });
</script>

এখানে:

• CSS এর transition এবং transform প্রপার্টি ব্যবহার করে মোডালকে স্লাইড করার ইফেক্ট দেয়া হয়েছে।

সারাংশ

Bulma তে Modal কম্পোনেন্ট ব্যবহার করে আপনি খুব সহজেই পপ-আপ উইন্ডো তৈরি করতে পারেন। এটি মোডাল উইন্ডোর ব্যাকগ্রাউ

ন্ড, কনটেন্ট এবং ক্লোজ বাটনসহ অত্যন্ত ইউজার ফ্রেন্ডলি। Bulma মোডালকে কাস্টমাইজ করার জন্য অনেক অপশন সরবরাহ করে, যেমন আকার পরিবর্তন, স্টাইলিং, এবং ইফেক্ট অ্যাড করা। এর সাহায্যে আপনি আপনার ওয়েবসাইটের ইন্টারঅ্যাকটিভিটি ও ইউজার এক্সপেরিয়েন্স উন্নত করতে পারবেন।