Modal এর মধ্যে Dynamic Content যুক্ত করা

Bulma ফ্রেমওয়ার্কের Modal কম্পোনেন্ট একটি পপ-আপ ডায়ালগ উইন্ডো তৈরি করতে ব্যবহৃত হয়, যা ওয়েব পৃষ্ঠার মধ্যে নির্দিষ্ট তথ্য বা কনটেন্ট প্রদর্শন করতে সহায়তা করে। আপনি Modal-এ Dynamic Content যোগ করতে চাইলে JavaScript বা জেকুয়েরি ব্যবহার করে সেটি সহজেই করতে পারেন।

১. Modal এর স্ট্রাকচার

Bulma এ Modal কম্পোনেন্ট তৈরির জন্য কিছু স্ট্যান্ডার্ড HTML ক্লাস ব্যবহার করা হয়। Modal সাধারণত একটি কন্টেইনার, একটি বডি এবং একটি ক্লোজ বাটন নিয়ে গঠিত থাকে।

Modal এর সাধারণ স্ট্রাকচার:

<!-- Modal -->
<div id="modal" class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <p id="dynamic-content">Loading content...</p>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

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

এখানে:

• modal ক্লাসটি Modal কন্টেইনার তৈরি করে।
• modal-background এবং modal-content ক্লাস Modal এর ব্যাকগ্রাউন্ড এবং কন্টেন্ট সেগমেন্ট নির্ধারণ করে।
• modal-close ক্লাসটি Modal বন্ধ করার জন্য ব্যবহৃত হয়।

২. Dynamic Content যোগ করা

Dynamic content যোগ করতে, JavaScript ব্যবহার করে আপনি Modal এর কন্টেন্ট পরিবর্তন করতে পারেন। যেমন, একটি বাটন ক্লিকের মাধ্যমে নতুন কন্টেন্ট লোড করা। নিচে উদাহরণ দেয়া হল।

উদাহরণ: Dynamic Content Modal

<!-- Modal Structure -->
<div id="modal" class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <p id="dynamic-content">This content will change dynamically.</p>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

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

<!-- Script for Dynamic Content -->
<script>
  document.getElementById('open-modal').addEventListener('click', function() {
    // Update Modal content dynamically
    document.getElementById('dynamic-content').innerHTML = "This is the new dynamic content!";
    
    // Open the modal
    document.getElementById('modal').classList.add('is-active');
  });

  // Close Modal when the close button is clicked
  document.querySelector('.modal-close').addEventListener('click', function() {
    document.getElementById('modal').classList.remove('is-active');
  });

  // Close Modal when clicking outside the modal
  document.querySelector('.modal-background').addEventListener('click', function() {
    document.getElementById('modal').classList.remove('is-active');
  });
</script>

এখানে:

• JavaScript ব্যবহার করে Modal এর কন্টেন্ট পরিবর্তন করা হয়েছে (innerHTML ব্যবহার করে)।
• classList.add('is-active') ব্যবহার করে Modal ওপেন করা হয়েছে এবং classList.remove('is-active') দিয়ে Modal বন্ধ করা হয়েছে।
• Modal এর ক্লোজ বাটন এবং ব্যাকগ্রাউন্ড ক্লিক করলে Modal বন্ধ হয়ে যাবে।

৩. AJAX বা API Call এর মাধ্যমে Dynamic Content

আপনি AJAX বা API কল ব্যবহার করে সার্ভার থেকে ডাইনামিক কন্টেন্ট লোড করতেও পারেন। নিচে উদাহরণ দেয়া হল যেখানে JSON ফাইল থেকে ডাটা লোড করা হচ্ছে।

উদাহরণ: API Call দিয়ে Dynamic Content Modal

<!-- Modal Structure -->
<div id="modal" class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <p id="dynamic-content">Loading content...</p>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

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

<!-- Script for Dynamic Content from API -->
<script>
  document.getElementById('open-modal').addEventListener('click', function() {
    // AJAX request to load dynamic content
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => response.json())
      .then(data => {
        // Update Modal content dynamically with API data
        document.getElementById('dynamic-content').innerHTML = data.title;
        
        // Open the modal
        document.getElementById('modal').classList.add('is-active');
      })
      .catch(error => {
        document.getElementById('dynamic-content').innerHTML = "Failed to load content.";
        console.error(error);
      });
  });

  // Close Modal when the close button is clicked
  document.querySelector('.modal-close').addEventListener('click', function() {
    document.getElementById('modal').classList.remove('is-active');
  });

  // Close Modal when clicking outside the modal
  document.querySelector('.modal-background').addEventListener('click', function() {
    document.getElementById('modal').classList.remove('is-active');
  });
</script>

এখানে:

• fetch API ব্যবহার করে ডাইনামিক কন্টেন্ট লোড করা হয়েছে এবং এটি Modal এর মধ্যে প্রদর্শন করা হয়েছে।
• এই উদাহরণে jsonplaceholder থেকে ডাটা নেয়া হচ্ছে, যা একটি ফ্রি API সার্ভিস।

৪. Modal-এর সাথে ফর্ম ব্যবহারের উদাহরণ

আপনি Modal এর মধ্যে ফর্ম বা ইনপুট ফিল্ডও যুক্ত করতে পারেন, যেখানে ব্যবহারকারী তথ্য পূর্ণ করতে পারে।

উদাহরণ: Modal with Form

<!-- Modal Structure -->
<div id="modal" class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <form id="modal-form">
        <div class="field">
          <label class="label">Name</label>
          <div class="control">
            <input class="input" type="text" id="name" placeholder="Enter your name">
          </div>
        </div>
        <div class="field">
          <div class="control">
            <button class="button is-primary" type="submit">Submit</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

<!-- Trigger Button -->
<button class="button is-primary" id="open-modal">Open Form</button>

<!-- Script for Dynamic Content and Form Submission -->
<script>
  document.getElementById('open-modal').addEventListener('click', function() {
    document.getElementById('modal').classList.add('is-active');
  });

  document.querySelector('.modal-close').addEventListener('click', function() {
    document.getElementById('modal').classList.remove('is-active');
  });

  document.querySelector('.modal-background').addEventListener('click', function() {
    document.getElementById('modal').classList.remove('is-active');
  });

  document.getElementById('modal-form').addEventListener('submit', function(event) {
    event.preventDefault();
    const name = document.getElementById('name').value;
    alert('Hello, ' + name);
    document.getElementById('modal').classList.remove('is-active');
  });
</script>

এখানে:

• Modal এর মধ্যে একটি ফর্ম যোগ করা হয়েছে।
• ব্যবহারকারী ফর্ম পূর্ণ করে সাবমিট করলে তার নাম প্রদর্শন করা হয়।

সারাংশ

Bulma ফ্রেমওয়ার্কে Modal কম্পোনেন্টে Dynamic Content যুক্ত করা খুব সহজ এবং এটি JavaScript, AJAX বা API কলের মাধ্যমে করা যেতে পারে। আপনি Modal এর কন্টেন্ট পরিবর্তন, ডাটা লোডিং এবং ফর্ম সংক্রান্ত কার্যক্রম সহজেই পরিচালনা করতে পারেন। এই পদ্ধতিগুলো ব্যবহার করে আপনি আরও ইন্টারঅ্যাকটিভ এবং কাস্টমাইজড মডাল তৈরি করতে পারবেন। Bulma এর ক্লিন ডিজাইন এবং সহজ ব্যবহারের কারণে Modal ব্যবহারে খুব কম কোডে কার্যকরী পপ-আপ তৈরি করা সম্ভব।