ফুল-স্ক্রিন ওভারলে সার্চ বক্স (Fullscreen Search Overlay)
বাটন ক্লিক করলে স্ক্রিনের উপরে একটি অপেক অভারলে সহ সার্চ বক্স স্লাইড/ফেড-ইন করে, ESC কী বা ক্লোজ বাটনে বন্ধ হয়। আধুনিক ওয়েবসাইটের সাধারণ প্যাটার্ন।
পূর্ণ কোড উদাহরণ
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ফুল-স্ক্রিন সার্চ</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
/* ট্রিগার বাটন */
.search-trigger {
background: #008b0c;
border: none;
color: white;
padding: 12px 24px;
font-size: 18px;
font-weight: 600;
border-radius: 6px;
cursor: pointer;
opacity: 0.9;
transition: opacity 0.2s, transform 0.1s;
}
.search-trigger:hover { opacity: 1; }
.search-trigger:active { transform: scale(0.98); }
/* অভারলে (লুকানো) */
.search-overlay {
position: fixed;
inset: 0; /* top:0; right:0; bottom:0; left:0; */
background: rgba(20, 20, 30, 0.9);
backdrop-filter: blur(8px);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* ওপেন অবস্থা */
.search-overlay.open {
opacity: 1;
visibility: visible;
}
/* সার্চ বার কন্টেইনার */
.search-bar {
width: 90%;
max-width: 700px;
display: flex;
gap: 10px;
transform: scale(0.95);
transition: transform 0.3s ease;
}
.search-overlay.open .search-bar { transform: scale(1); }
/* ইনপুট ফিল্ড */
.search-input {
flex: 1;
padding: 18px 24px;
font-size: 20px;
border: none;
border-radius: 8px;
background: white;
color: #333;
outline: none;
}
.search-input::placeholder { color: #999; }
.search-input:focus { box-shadow: 0 0 0 3px rgba(255,255,255,0.3); }
/* সাবমিট বাটন */
.search-submit {
padding: 18px 32px;
background: #3a15f1;
color: white;
font-size: 18px;
font-weight: 600;
border: none;
border-radius: 8px;
cursor: pointer;
opacity: 0.9;
transition: opacity 0.2s, background 0.2s;
white-space: nowrap;
}
.search-submit:hover { opacity: 1; background: #2d0fd8; }
/* ক্লোজ বাটন */
.search-close {
position: absolute;
top: 30px;
right: 40px;
font-size: 40px;
color: #ff4444;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s, transform 0.2s;
line-height: 1;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.search-close:hover {
opacity: 1;
transform: rotate(90deg);
background: rgba(255,255,255,0.1);
}
/* রেসপন্সিভ */
@media (max-width: 480px) {
.search-bar { flex-direction: column; }
.search-submit { width: 100%; }
.search-close { top: 15px; right: 15px; font-size: 32px; }
}
</style>
</head>
<body>
<div class="search-overlay" id="searchOverlay" role="dialog" aria-modal="true" aria-label="সার্চ">
<button class="search-close" id="searchClose" aria-label="সার্চ বন্ধ করুন">×</button>
<div class="search-bar">
<form id="searchForm" role="search">
<input type="text" class="search-input" placeholder="খুঁজুন..." autocomplete="off" autofocus>
<button type="submit" class="search-submit">
<i class="fas fa-search"></i> সার্চ
</button>
</form>
</div>
</div>
<main style="padding: 40px 20px; text-align: center;">
<h1>ফুল-স্ক্রিন সার্চ উদাহরণ</h1>
<p>নিচের বাটনে ক্লিক করুন</p>
<button class="search-trigger" id="searchTrigger">সার্চ খুলুন</button>
</main>
<script>
const overlay = document.getElementById('searchOverlay');
const trigger = document.getElementById('searchTrigger');
const closeBtn = document.getElementById('searchClose');
const input = overlay.querySelector('.search-input');
const form = document.getElementById('searchForm');
// ওপেন ফাংশন
function openSearch() {
overlay.classList.add('open');
input.focus(); // অটো ফোকাস
document.body.style.overflow = 'hidden'; // ব্যাকগ্রাউন্ড স্ক্রল বন্ধ
}
// ক্লোজ ফাংশন
function closeSearch() {
overlay.classList.remove('open');
document.body.style.overflow = '';
input.value = ''; // ইনপুট ক্লিয়ার
}
// ইভেন্ট লিসেনার
trigger.addEventListener('click', openSearch);
closeBtn.addEventListener('click', closeSearch);
// ESC কী
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && overlay.classList.contains('open')) {
closeSearch();
}
});
// অভারলে ক্লিক (ব্যাকড্রপ) করলে বন্ধ
overlay.addEventListener('click', (e) => {
if (e.target === overlay) closeSearch();
});
// ফর্ম সাবমিট
form.addEventListener('submit', (e) => {
e.preventDefault();
const query = input.value.trim();
if (query) {
console.log('সার্চ কোয়েরি:', query);
// এখানে আসল সার্চ লজিক / রিডাইরেক্ট
alert(`সার্চ: "${query}"`);
closeSearch();
}
});
</script>
</body>
</html>কীভাবে কাজ করে
- ডিফল্ট: `.search-overlay`-এ `opacity: 0; visibility: hidden` — লুকানো এবং নন-ইন্টারঅ্যাক্টিভ।
- ওপেন: `.open` ক্লাস যোগ → `opacity: 1; visibility: visible` + ফ্লেক্স সেন্টারিং।
- ট্রানজিশন: `opacity`, `visibility`, `transform` — স্মুথ ফেড/স্কেল।
- ব্যাকড্রপ ব্লার: `backdrop-filter: blur(8px)` — আধুনিক গ্লাসমরফিজম ইফেক্ট।
- অ্যাক্সেসিবিলিটি: `role="dialog"`, `aria-modal="true"`, `autofocus`, `aria-label`, ESC কী, ফোকাস ট্র্যাপিং (এখানে সিম্পল রাখা হয়েছে)।
উন্নত ফিচার (অপশনাল)
- ফোকাস ট্র্যাপিং: Tab কী দিয়ে শুধু মডালের ভিতরে নেভিগেট।
- সার্চ সাজেশন/অটোকমপ্লিট: ইনপুটে টাইপ করলে AJAX সাজেশন দেখান।
- কীবোর্ড শর্টকাট: `Ctrl/Cmd + K` দিয়ে ওপেন।
- ইতিহাস/রিসেন্ট সার্চ: localStorage-এ সংরক্ষণ।
কীবোর্ড শর্টকাট যোগ করা (Ctrl/Cmd + K)
document.addEventListener('keydown', (e) => {
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
e.preventDefault();
if (overlay.classList.contains('open')) closeSearch();
else openSearch();
}
});এই প্যাটার্নটি যেকোনো সাইটে সহজে ইন্টিগ্রেট করা যায়।
