Materialize এর Modal এবং Dialogs

Modal এবং Dialogs হল ওয়েব ডিজাইনের অত্যন্ত কার্যকরী উপাদান যা ব্যবহারকারীর ইন্টারঅ্যাকশন ও ইনপুট সংগ্রহ করতে সাহায্য করে। Materialize CSS ফ্রেমওয়ার্কে Modal এবং Dialogs এর জন্য প্রি-স্টাইলড কম্পোনেন্ট রয়েছে যা সহজেই কাস্টমাইজ করা যায় এবং ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে। এখানে Modal এবং Dialogs এর ব্যবহার এবং কাস্টমাইজেশন নিয়ে আলোচনা করা হলো।

Materialize Modal

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

Modal এর HTML কোড:

<!-- Trigger Button -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Open Modal</a>

<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>This is a simple modal example.</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    <a href="#!" class="modal-close waves-effect waves-red btn-flat">Cancel</a>
  </div>
</div>

<!-- Materialize JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<script>
  // Initialize Modal
  $(document).ready(function(){
    $('.modal').modal();
  });
</script>

কোড ব্যাখ্যা:

• modal-trigger ক্লাস: এই ক্লাসটি মডালটি খুলতে ব্যবহৃত হয়। আপনি যেকোনো এলিমেন্ট (যেমন বাটন) এ এই ক্লাস প্রয়োগ করতে পারেন।
• modal-content: এটি মডালের ভিতরের কনটেন্ট ধারণ করে, যেমন হেডার, প্যারাগ্রাফ ইত্যাদি।
• modal-footer: এটি মডালের নিচের অংশে বাটন বা লিঙ্কগুলো ধারণ করে, যেমন "Agree" এবং "Cancel" বাটন।

Modal with Form

Modal এর মধ্যে আপনি form বা other inputs ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

<!-- Trigger Button -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal2">Open Form</a>

<!-- Modal Structure with Form -->
<div id="modal2" class="modal">
  <div class="modal-content">
    <h4>Form Modal</h4>
    <form action="#">
      <div class="input-field">
        <input id="name" type="text" class="validate">
        <label for="name">Your Name</label>
      </div>
      <div class="input-field">
        <input id="email" type="email" class="validate">
        <label for="email">Email</label>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Submit</a>
    <a href="#!" class="modal-close waves-effect waves-red btn-flat">Cancel</a>
  </div>
</div>

এখানে, আপনি form এর মাধ্যমে ইউজারের ইনপুট সংগ্রহ করতে পারেন।

Materialize Dialogs

Dialogs হল একটি পপ-আপ উইন্ডো যা সাধারণত তথ্য প্রদর্শন বা ইউজারের সাথে ইন্টারঅ্যাকশন করার জন্য ব্যবহৃত হয়। Materialize CSS এ ডায়ালগের জন্য Modal ব্যবহার করা হয়ে থাকে, তবে আপনি বিশেষভাবে ডায়ালগ তৈরি করতে চাইলে Toast এবং Snackbar ব্যবহার করতে পারেন।

Toast Example

<!-- Trigger Button -->
<a class="waves-effect waves-light btn" onclick="M.toast({html: 'This is a toast message'})">Show Toast</a>

<!-- Materialize JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

কোড ব্যাখ্যা:

• M.toast(): Materialize CSS এর Toast ফিচার ব্যবহার করে আপনি ছোট পপ-আপ বার তৈরি করতে পারেন, যা ব্যবহারকারীর কাছে তথ্য দ্রুত উপস্থাপন করে। html প্যারামিটার ব্যবহার করে আপনি টেক্সট প্রদর্শন করতে পারেন।

Snackbar Example

<!-- Trigger Button -->
<a class="waves-effect waves-light btn" onclick="M.snackbar({html: 'This is a snackbar message'})">Show Snackbar</a>

<!-- Materialize JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Snackbar ছোট এবং সুন্দর বার যা স্ক্রীনের নিচে প্রদর্শিত হয় এবং এটি সাইটে কোনো বিশেষ কার্যকলাপ বা তথ্য দেখানোর জন্য ব্যবহৃত হয়।

Modal এবং Dialogs এর মধ্যে পার্থক্য

• Modal: এটি একটি বড় পপ-আপ উইন্ডো, যা সাধারণত ব্যবহারকারীর পূর্ণ মনোযোগ আকর্ষণ করে এবং একটিই কার্যকলাপ বা ইনপুট নেওয়ার জন্য ব্যবহৃত হয়।
• Toast: এটি একটি ছোট পপ-আপ বার, যা সাধারণত স্ক্রীনের নিচে প্রদর্শিত হয় এবং দ্রুত কোনো তথ্য প্রদর্শন করতে ব্যবহৃত হয়।
• Snackbar: এটি একটি ছোট বার যা স্ক্রীনের নিচে প্রদর্শিত হয় এবং ব্যবহারকারীদের কাছে দ্রুত কোনো সিস্টেম বা অ্যাপ্লিকেশন স্ট্যাটাস জানানোর জন্য ব্যবহৃত হয়।

উপসংহার

Materialize CSS এর Modal এবং Dialogs ওয়েব ডিজাইন এবং ইউজার ইন্টারফেসের একটি গুরুত্বপূর্ণ অংশ। Modal বড় পপ-আপ উইন্ডো তৈরি করতে সহায়তা করে, যা ব্যবহারকারীদের ইন্টারঅ্যাকশন বা ইনপুট নিতে ব্যবহৃত হয়। Toast এবং Snackbar ছোট পপ-আপ বার যা তথ্য প্রদর্শন করতে ব্যবহৃত হয়। Materialize এর এই কম্পোনেন্টগুলো সহজে কাস্টমাইজ এবং ব্যবহার করা যায়, যা আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনের ইউজার অভিজ্ঞতাকে আরও উন্নত করে তোলে।

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

এখানে Materialize এর মাধ্যমে Modal তৈরি এবং কনফিগার করার পদ্ধতি তুলে ধরা হলো।

Modal তৈরি করা

Materialize CSS-এ Modal তৈরি করার জন্য কয়েকটি স্টেপ অনুসরণ করতে হবে। প্রথমত, আপনাকে Modal Trigger এবং Modal Structure তৈরি করতে হবে।

১. Modal Structure:

<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Open Modal</a>

<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Title</h4>
    <p>This is a simple modal in Materialize CSS.</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    <a href="#!" class="modal-close waves-effect waves-red btn-flat">Cancel</a>
  </div>
</div>

এখানে:

• modal-trigger ক্লাসটি button বা link তে যোগ করা হয় যা modal কে ট্রিগার করে। এখানে, "Open Modal" বাটন ক্লিক করলে modal খুলবে।
• modal1 হল Modal ID যা modal-trigger এর সাথে মিলিয়ে দেওয়া হয়।
• modal-content: এখানে modal এর মূল কনটেন্ট থাকে (যেমন শিরোনাম, টেক্সট ইত্যাদি)।
• modal-footer: এখানে modal এর বটমে কিছু অপশন বা বাটন থাকতে পারে, যেমন "Agree" বা "Cancel"।

২. Modal Trigger Button:

এটি একটি বাটন বা লিঙ্ক হতে পারে যা modal কে ট্রিগার করবে।

<a href="#modal1" class="waves-effect waves-light btn modal-trigger">Open Modal</a>

এখানে:

• href="#modal1": এটি id="modal1" এর সাথে সংযুক্ত করা হয়েছে, যা modal কে ট্রিগার করবে।

Modal কনফিগার করা

Materialize CSS এ modal কনফিগার করতে JavaScript ব্যবহার করা হয়। আপনি modal এর বিভিন্ন বৈশিষ্ট্য কনফিগার করতে পারেন যেমন auto-open, modal animation, closing behavior ইত্যাদি।

১. Modal Initialize (JavaScript):

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems, {
      opacity: 0.5,   // Modal opacity
      inDuration: 300, // Animation duration when opening
      outDuration: 200 // Animation duration when closing
    });
  });
</script>

এখানে:

• opacity: Modal এর ব্যাকগ্রাউন্ডের অস্বচ্ছতা নির্ধারণ করে (যত কম হবে, তত বেশি স্বচ্ছতা থাকবে)।
• inDuration: Modal ওপেন হওয়ার সময় কতটুকু অ্যানিমেশন হবে।
• outDuration: Modal বন্ধ হওয়ার সময় কতটুকু অ্যানিমেশন হবে।

২. Auto Open Modal:

কোনো একটি modal স্বয়ংক্রিয়ভাবে পেজ লোড হওয়ার সাথে সাথে খুলতে চাইলে, আপনি open মেথড ব্যবহার করতে পারেন।

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems);
    instances[0].open(); // This will automatically open the modal
  });
</script>

এটি পেজ লোড হওয়ার পর প্রথম modal টি অটো ওপেন করবে।

৩. Modal Close Event:

যদি আপনি modal বন্ধ করার পরে কোনো কাজ করতে চান (যেমন: কোনো ফর্ম সাবমিট, ডেটা সেভ ইত্যাদি), তাহলে আপনি onCloseEnd ইভেন্ট ব্যবহার করতে পারেন।

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems, {
      onCloseEnd: function() {
        console.log("Modal closed!");
      }
    });
  });
</script>

এটি modal বন্ধ হওয়ার পর "Modal closed!" মেসেজ কনসোলে প্রদর্শন করবে।

Modal এর ব্যবহারিক উদাহরণ

উদাহরণ: ফর্মের মাধ্যমে তথ্য সংগ্রহের জন্য Modal

<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Submit Feedback</a>

<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Submit Your Feedback</h4>
    <form>
      <div class="input-field">
        <input id="name" type="text" class="validate" required>
        <label for="name">Your Name</label>
      </div>
      <div class="input-field">
        <textarea id="feedback" class="materialize-textarea" required></textarea>
        <label for="feedback">Feedback</label>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Submit</a>
    <a href="#!" class="modal-close waves-effect waves-red btn-flat">Cancel</a>
  </div>
</div>

JavaScript for Modal Configuration:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems);
  });
</script>

Modal এর অতিরিক্ত কনফিগারেশন

Materialize CSS এর Modal এর বিভিন্ন অতিরিক্ত কনফিগারেশন রয়েছে, যেমন:

1. Fixed Footer: Modal এর নিচের অংশে একটি স্থির ফ footer থাকতে পারে।

   <div class="modal-footer fixed">
     <a href="#!" class="modal-close waves-effect waves-green btn-flat">Save</a>
     <a href="#!" class="modal-close waves-effect waves-red btn-flat">Cancel</a>
   </div>
   

2. Full-Screen Modal: Modal কে পূর্ণ স্ক্রীনে প্রদর্শন করতে fullscreen ক্লাস ব্যবহার করতে পারেন।

   <div id="modal1" class="modal fullscreen">
     <!-- Content here -->
   </div>
   

উপসংহার

Materialize CSS এর Modal পপ-আপ উইন্ডো তৈরি করতে সহজ এবং কার্যকরী উপাদান। এর মাধ্যমে আপনি ইন্টারঅ্যাকটিভ কনটেন্ট, ফর্ম, ইনফরমেশন ডায়ালগ ইত্যাদি তৈরি করতে পারেন। Modal কনফিগার করা খুবই সহজ, এবং আপনি এটি আপনার প্রয়োজন অনুযায়ী কাস্টমাইজ করতে পারেন। Materialize CSS এর মাধ্যমে আপনি animation, auto-open, auto-close, এবং অন্যান্য ফিচার ব্যবহার করে আরও উন্নত এবং ইউজার-বান্ধব modal তৈরি করতে পারবেন।

Materialize CSS এর Modal একটি জনপ্রিয় UI উপাদান যা পপ-আপ উইন্ডো হিসেবে কাজ করে এবং ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য বিভিন্ন তথ্য বা ফর্ম প্রদর্শন করতে ব্যবহৃত হয়। Modal সিস্টেমটি সঠিকভাবে কাস্টমাইজ এবং স্টাইল করা হলে আপনার ওয়েবসাইট বা অ্যাপ্লিকেশন আরও ইউজার-বান্ধব এবং ইন্টারঅ্যাকটিভ হয়ে ওঠে।

এখানে আমরা আলোচনা করব কিভাবে Modal এর সাইজ এবং স্টাইল কাস্টমাইজ করা যায়।

Materialize Modal এর বেসিক স্ট্রাকচার

Materialize এর Modal একটি সহজ এবং কার্যকরী উপাদান যা HTML, CSS এবং JavaScript ব্যবহারের মাধ্যমে তৈরি করা হয়। এর মধ্যে কয়েকটি মূল উপাদান রয়েছে:

• Modal Trigger: এটি সাধারণত কোনো বাটন বা লিঙ্ক হয় যা Modal এর প্রদর্শন শুরু করে।
• Modal Content: এটি মূল কন্টেন্ট যা Modal উইন্ডোর মধ্যে প্রদর্শিত হয়।
• Modal Footer: এটি সাধারণত কিছু অ্যাকশন বাটন যেমন Save, Cancel ইত্যাদি রাখে।

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Modal Example</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

  <!-- Trigger Button for Modal -->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Open Modal</a>

  <!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>This is a simple modal.</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
      <a href="#!" class="modal-close waves-effect waves-red btn-flat">Cancel</a>
    </div>
  </div>

  <!-- Materialize JS and jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <script>
    $(document).ready(function(){
      $('.modal').modal();
    });
  </script>

</body>
</html>

এখানে:

• modal-trigger: এটি বাটন যা মডাল খুলবে।
• modal: এটি Modal এর কন্টেইনার যা পপ-আপ হিসেবে প্রদর্শিত হবে।

Modal এর সাইজ কাস্টমাইজ করা

Materialize এর ডিফল্ট মডাল সাইজ সাধারণত small (ছোট) হয়। তবে, আপনি মডালের সাইজ কাস্টমাইজ করতে পারেন এবং একে large (বড়) বা custom size-এ পরিণত করতে পারেন।

১. Small Modal (ডিফল্ট সাইজ)

ডিফল্টভাবে Materialize CSS একটি small মডাল প্রদান করে। উপরের উদাহরণে small মডাল ব্যবহার করা হয়েছে।

২. Large Modal

মডালের সাইজ বড় করতে modal-large ক্লাস ব্যবহার করতে হবে।

<div id="modal1" class="modal modal-large">
  <div class="modal-content">
    <h4>Large Modal</h4>
    <p>This is a large modal.</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    <a href="#!" class="modal-close waves-effect waves-red btn-flat">Cancel</a>
  </div>
</div>

এখানে:

• modal-large ক্লাসটি মডালটির সাইজ বড় করে।

৩. Custom Size Modal

আপনি চাইলে মডালের সাইজ কাস্টমাইজ করতে CSS ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি মডালের প্রস্থ এবং উচ্চতা নির্ধারণ করতে পারেন:

<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Custom Sized Modal</h4>
    <p>This modal has custom size.</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    <a href="#!" class="modal-close waves-effect waves-red btn-flat">Cancel</a>
  </div>
</div>

<style>
  .modal {
    width: 80%;
    height: 70%;
  }
</style>

এখানে:

• width: 80% এবং height: 70% ক্লাসগুলি মডালের সাইজ কাস্টমাইজ করার জন্য ব্যবহার করা হয়েছে। আপনি এই মানগুলিকে আপনার প্রয়োজন অনুযায়ী কাস্টমাইজ করতে পারেন।

Modal Styling কাস্টমাইজ করা

Materialize Modal এর স্টাইলিং কাস্টমাইজ করতে CSS ব্যবহার করা যেতে পারে, যাতে এটি আপনার ডিজাইন অনুসারে আরো আকর্ষণীয় এবং ইউনিক হয়ে ওঠে। নিচে কিছু কাস্টমাইজেশন উদাহরণ দেওয়া হলো।

১. Modal Header Styling

<style>
  .modal-header {
    background-color: #26a69a;
    color: white;
    text-align: center;
  }
</style>

<div id="modal1" class="modal">
  <div class="modal-content modal-header">
    <h4>Custom Modal Header</h4>
    <p>This is a modal with custom header styling.</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    <a href="#!" class="modal-close waves-effect waves-red btn-flat">Cancel</a>
  </div>
</div>

এখানে:

• modal-header ক্লাসটি background-color এবং color পরিবর্তন করেছে এবং text-align সেন্টার করেছে।

২. Modal Footer Styling

<style>
  .modal-footer {
    background-color: #fafafa;
    padding: 20px;
    text-align: right;
  }
</style>

<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Custom Modal Footer</h4>
    <p>This modal has a custom styled footer.</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    <a href="#!" class="modal-close waves-effect waves-red btn-flat">Cancel</a>
  </div>
</div>

এখানে:

• modal-footer ক্লাসের জন্য background-color, padding, এবং text-align কাস্টমাইজ করা হয়েছে।

৩. Modal Close Button Styling

<style>
  .modal-close {
    background-color: #ff5722;
    color: white;
  }
</style>

<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal with Custom Close Button</h4>
    <p>This modal has a custom styled close button.</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    <a href="#!" class="modal-close waves-effect waves-red btn-flat">Cancel</a>
  </div>
</div>

এখানে:

• modal-close ক্লাসের background-color এবং color কাস্টমাইজ করা হয়েছে।

উপসংহার

Materialize CSS এর Modal একটি অত্যন্ত শক্তিশালী এবং কাস্টমাইজযোগ্য উপাদান। আপনি modal size এবং styling কাস্টমাইজ করতে পারেন, যেমন large modal, custom modal size, modal header styling, footer styling, এবং close button styling। CSS এবং Materialize এর কাস্টম ক্লাসের মাধ্যমে আপনি সহজেই আপনার Modal এর ডিজাইন এবং ফাংশনালিটি উন্নত করতে পারেন। Modal এর সঠিক কাস্টমাইজেশন আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনকে আরও ব্যবহারকারী-বান্ধব এবং আকর্ষণীয় করে তুলবে।

Materialize CSS ফ্রেমওয়ার্কে Popup এবং Confirmation Dialog তৈরি করা খুবই সহজ এবং ইন্টারঅ্যাকটিভ। Materialize এর modals ব্যবহার করে আপনি সহজে পপআপ এবং কনফার্মেশন ডায়ালগ তৈরি করতে পারবেন। এগুলো ব্যবহারকারীকে কোনো নির্দিষ্ট কার্যকলাপের জন্য সতর্ক বা কনফার্মেশন প্রদান করতে সহায়তা করে।

Popup Dialog (Modal)

Popup Dialog বা Modal হলো একটি পপ-আপ উইন্ডো যা ইউজারের ইন্টারঅ্যাকশন বা কোনো নির্দিষ্ট কার্যকলাপের জন্য প্রদর্শিত হয়। সাধারণত, এটি পেজের ওপর লেয়ার আকারে প্রদর্শিত হয় এবং ব্যবহারকারীকে কোনো একশন নিতে সহায়তা করে।

Simple Popup/Dialog তৈরি করা

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Popup Dialog Example</title>
    <!-- Materialize CSS Link -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

    <!-- Trigger Button -->
    <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Open Modal</a>

    <!-- Popup/Modal Structure -->
    <div id="modal1" class="modal">
        <div class="modal-content">
            <h4>Modal Title</h4>
            <p>This is a simple popup modal. You can add any content here.</p>
        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
            <a href="#!" class="modal-close waves-effect waves-red btn-flat">Cancel</a>
        </div>
    </div>

    <!-- Materialize JS Link -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <!-- Initialize Modal -->
    <script>
        $(document).ready(function(){
            $('.modal').modal();
        });
    </script>

</body>
</html>

কোড ব্যাখ্যা:

• modal-trigger: এই ক্লাসের মাধ্যমে একটি বাটন তৈরি করা হয়েছে যা ক্লিক করলে পপআপ বা মডাল ডায়ালগ খোলে।
• modal: এটি পপআপ ডায়ালগের জন্য ব্যবহার করা হয়। আপনি এখানে আপনার কনটেন্ট রাখতে পারেন।
• modal-footer: পপআপের নিচে বাটনগুলো থাকে, যেগুলো দিয়ে ইউজার সিদ্ধান্ত নিতে পারে। এখানে Agree এবং Cancel বাটন রয়েছে।
• $('.modal').modal();: এই স্ক্রিপ্টটি মডালকে কার্যকরী করে।

Confirmation Dialog

Confirmation Dialog হলো একটি বিশেষ ধরনের পপআপ ডায়ালগ যা ইউজার থেকে একটি কনফার্মেশন নিয়ে থাকে। এটি সাধারণত কিছু একশন বা কাজ নিশ্চিত করার জন্য ব্যবহার করা হয়, যেমন "আপনি কি এই অ্যাকশনটি নিশ্চিত করতে চান?"।

Confirmation Dialog তৈরি করা

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Confirmation Dialog Example</title>
    <!-- Materialize CSS Link -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

    <!-- Trigger Button for Confirmation -->
    <a class="waves-effect waves-light btn modal-trigger" href="#confirmModal">Delete Item</a>

    <!-- Confirmation Modal Structure -->
    <div id="confirmModal" class="modal">
        <div class="modal-content">
            <h4>Are you sure?</h4>
            <p>You are about to delete this item. Do you want to continue?</p>
        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-close waves-effect waves-green btn-flat">Yes</a>
            <a href="#!" class="modal-close waves-effect waves-red btn-flat">No</a>
        </div>
    </div>

    <!-- Materialize JS Link -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <!-- Initialize Modal -->
    <script>
        $(document).ready(function(){
            $('.modal').modal();
        });
    </script>

</body>
</html>

কোড ব্যাখ্যা:

• Confirmation Modal: এখানে modal ব্যবহার করে একটি কনফার্মেশন ডায়ালগ তৈরি করা হয়েছে। এর মধ্যে প্রশ্ন করা হয়েছে, "আপনি কি এটি মুছে ফেলতে চান?"।
• Yes এবং No বাটন: এই বাটনগুলোর মাধ্যমে ইউজার Yes বা No বেছে নিতে পারবেন।
• modal-close: এই ক্লাসটি ডায়ালগকে বন্ধ করার জন্য ব্যবহৃত হয় যখন ইউজার একটি বাটন ক্লিক করেন।

Popup/Modal এবং Confirmation Dialog এর মধ্যে পার্থক্য

• Popup/Modal সাধারণত কোনো বিশেষ কনটেন্ট বা ইন্টারঅ্যাকশন প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি যেকোনো ধরনের তথ্য বা অ্যাকশন সংক্রান্ত হতে পারে।
• Confirmation Dialog সাধারণত একটি সুনির্দিষ্ট কনফার্মেশন অ্যাকশন গ্রহণ করতে ব্যবহৃত হয়, যেমন "আপনি কি নিশ্চিত যে আপনি এই অ্যাকশনটি করতে চান?"।

উপসংহার

Materialize CSS এর Popup এবং Confirmation Dialog সহজেই তৈরি করা যায়। এর মাধ্যমে আপনি আপনার ওয়েবসাইটে ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব পপআপ উইন্ডো এবং কনফার্মেশন ডায়ালগ যুক্ত করতে পারেন। Modal এবং Confirmation Dialog গুলি ওয়েব ডিজাইন এবং ডেভেলপমেন্টে অত্যন্ত কার্যকরী টুল হিসেবে কাজ করে, যা ইউজারের অভিজ্ঞতা উন্নত করতে সহায়তা করে।

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

এখানে Modal এর Events এবং Animation নিয়ে বিস্তারিত আলোচনা করা হলো।

Modal তৈরি করা

Modal তৈরি করতে Materialize CSS এ কিছু সহজ পদক্ষেপ অনুসরণ করা হয়। প্রথমে, HTML ফাইলে Modal এর স্ট্রাকচার তৈরি করতে হবে এবং তারপর JavaScript দিয়ে এটি কনফিগার করতে হবে।

১. Basic Modal Structure

<!-- Trigger/Button for Modal -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Open Modal</a>

<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>This is a simple modal example.</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
  </div>
</div>

<!-- Include Materialize CSS & JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

এখানে:

• modal-trigger ক্লাসটি একটি বাটন বা লিঙ্ক তৈরি করে, যা ক্লিক করলে Modal খুলবে।
• modal ID সহ একটি div তৈরি করা হয়, যা Modal এর কন্টেন্ট ধারণ করে।
• modal-content: এখানে Modal এর মেইন কন্টেন্ট থাকবে।
• modal-footer: এই অংশে সাধারণত Close বাটন বা অন্যান্য অ্যাকশন থাকে।

Modal Events

Materialize CSS এ Modal ব্যবহার করার সময়, আপনি বিভিন্ন ইভেন্ট ট্রিগার করতে পারেন। এই ইভেন্টগুলো আপনাকে Modal ওপেন, ক্লোজ বা অন্যান্য কার্যক্রমের উপর কাস্টমাইজেশন করতে সহায়ক।

১. Opening Modal (Open Event)

Modal খুললে এই ইভেন্টটি ট্রিগার হয়। আপনি JavaScript এর মাধ্যমে এটি কাস্টমাইজ করতে পারেন।

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems, {
      onOpenStart: function() {
        console.log('Modal is about to open');
      }
    });
  });
</script>

এখানে:

• onOpenStart: যখন Modal খোলার জন্য প্রস্তুত হয়, তখন এই ইভেন্টটি ট্রিগার হবে।

২. Closing Modal (Close Event)

Modal বন্ধ হলে এই ইভেন্টটি ট্রিগার হয়।

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems, {
      onCloseEnd: function() {
        console.log('Modal has been closed');
      }
    });
  });
</script>

এখানে:

• onCloseEnd: Modal বন্ধ হওয়ার পরে এই ইভেন্টটি ট্রিগার হয়।

৩. Additional Events:

Materialize CSS এ Modal এর জন্য আরও কিছু ইভেন্ট রয়েছে:

• onOpenEnd: Modal সম্পূর্ণরূপে খোলার পরে ট্রিগার হয়।
• onCloseStart: Modal বন্ধ হওয়ার আগে ট্রিগার হয়।

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems, {
      onOpenEnd: function() {
        console.log('Modal has opened');
      },
      onCloseStart: function() {
        console.log('Modal is closing');
      }
    });
  });
</script>

Modal Animations

Materialize CSS এ Modal এর জন্য কিছু সুন্দর animations অন্তর্ভুক্ত করা হয়েছে, যা ব্যবহারকারীর অভিজ্ঞতাকে আরও আকর্ষণীয় করে তোলে। আপনি Modal এর অ্যানিমেশন কাস্টমাইজ করতে পারেন, যেমন: কিভাবে Modal খুলবে এবং বন্ধ হবে।

১. Basic Animation

Materialize CSS ডিফল্টভাবে Modal খুললে এবং বন্ধ হলে কিছু অ্যানিমেশন প্রভাব দেয়।

• Fade In: Modal খুললে একটি মসৃণ ফেড ইন অ্যানিমেশন দেখানো হয়।
• Fade Out: Modal বন্ধ হলে একটি ফেড আউট অ্যানিমেশন দেখানো হয়।

২. Customizing Animation

Materialize CSS এ Modal এর জন্য animation duration এবং in/out effect কাস্টমাইজ করা যেতে পারে।

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems, {
      inDuration: 500, // Opening animation duration (ms)
      outDuration: 300, // Closing animation duration (ms)
      preventScrolling: true // Prevent scrolling when Modal is open
    });
  });
</script>

এখানে:

• inDuration: Modal খোলার সময় অ্যানিমেশনটির সময়কাল নির্ধারণ করে (মিলিসেকেন্ডে)।
• outDuration: Modal বন্ধ করার সময় অ্যানিমেশনটির সময়কাল নির্ধারণ করে।
• preventScrolling: Modal খোলার সময় স্ক্রোলিং প্রতিরোধ করতে ব্যবহৃত হয়।

৩. Custom Animations (CSS)

আপনি CSS এর মাধ্যমে কাস্টম animations বা transitions যোগ করতে পারেন Modal এর উপর। নিচে একটি উদাহরণ দেওয়া হলো, যেখানে CSS ব্যবহার করে Modal এর এন্ট্রি এবং এক্সিট অ্যানিমেশন কাস্টমাইজ করা হয়েছে।

<style>
  .modal {
    animation: slideIn 0.5s ease-out;
  }

  @keyframes slideIn {
    from {
      transform: translateY(-50%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems);
  });
</script>

এখানে:

• slideIn অ্যানিমেশনটি Modal এর জন্য একটি কাস্টম অ্যানিমেশন তৈরি করেছে, যেখানে Modal উপরে থেকে নিচে আসবে।

উপসংহার

Materialize CSS এ Modal একটি অত্যন্ত কার্যকরী উপাদান যা ওয়েবসাইটে ব্যবহারকারীর অভিজ্ঞতা বাড়ানোর জন্য ব্যবহার করা হয়। আপনি Modal এর বিভিন্ন events যেমন open, close, open-end, এবং close-start ব্যবহার করে Modal এর কার্যকলাপ কাস্টমাইজ করতে পারেন। এছাড়াও, animations এর মাধ্যমে Modal এর অ্যানিমেশন প্রভাব কাস্টমাইজ করা যায়, যেমন fade-in, slide-in, ইত্যাদি। এগুলি ব্যবহারকারীদের কাছে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা প্রদান করে।