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 গুলি ওয়েব ডিজাইন এবং ডেভেলপমেন্টে অত্যন্ত কার্যকরী টুল হিসেবে কাজ করে, যা ইউজারের অভিজ্ঞতা উন্নত করতে সহায়তা করে।
Read more
