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 এর বিভিন্ন অতিরিক্ত কনফিগারেশন রয়েছে, যেমন:
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>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 তৈরি করতে পারবেন।
Read more
