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 এর সঠিক কাস্টমাইজেশন আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনকে আরও ব্যবহারকারী-বান্ধব এবং আকর্ষণীয় করে তুলবে।
Read more
