آیا تا به حال نیاز به اضافه کردن یک پنجره معین به وب سایت خود دارید اما مطمئن نیستید که از کجا شروع کنید؟ شاید شما سعی کرده اید از یک کتابخانه JavaScript استفاده کنید اما آن را برای نیازهای خود خیلی نفخ کرده اید. خوب ، امروز من قصد دارم شما را از طریق ایجاد پنجره مودال سفارشی خود با استفاده از چیزی جز HTML ، CSS و وانیل JavaScript پیاده کنم.
من سالها در ده ها پروژه در حال ساخت مودال هستم و رویکرد خود را برای ایجاد راه حلی سبک ، در دسترس ، در دسترس و عالی به نظر می رسانم. بیایید شیرجه بزنیم!
درک آنچه در حال ساختن هستیم
قبل از نوشتن هر کد ، بیایید بفهمیم چه چیزی ایجاد می کنیم. یک معین (که گاهی اوقات گفتگو نامیده می شود) پنجره ای است که در بالای محتوای صفحه ظاهر می شود ، معمولاً قبل از بازگشت به صفحه اصلی به تعامل کاربر نیاز دارد. این برای تأیید ، اطلاعات اضافی یا فرم هایی که به صفحه جداگانه احتیاج ندارند ، مناسب است.
معین ما خواهد داشت:
- یک دکمه ماشه برای باز کردن آن
- روکش نیمه شفاف که پس زمینه را کمرنگ می کند
- یک دکمه نزدیک
- انیمیشن های صاف
- قابلیت دسترسی به صفحه کلید
- پاسخگویی سیار
تنظیم ساختار HTML
بیایید با ساختار اصلی HTML شروع کنیم. یک فایل جدید به نام ایجاد کنید modal.html و کد زیر را اضافه کنید:
lang="en">
charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
این یک صفحه ساده با عنوان و یک دکمه به ما می دهد. حال ، بیایید HTML را برای معین خود اضافه کنیم. ما این را درست قبل از بسته شدن قرار خواهیم داد
tag:
id="modalOverlay" class="modal-overlay">
class="modal" role="dialog" aria-labelledby="modalTitle" aria-modal="true">
class="modal-content">
class="modal-header">
id="modalTitle" class="modal-title">Modal Title
class="modal-body">
This is a fully responsive modal popup with smooth animations. It's built with HTML, CSS, and vanilla JavaScript.
The modal can be closed by:
style="margin-left: 1.5rem; margin-top: 0.5rem;">
Clicking the close button
Clicking outside the modal
Pressing the Escape key
class="modal-footer">
بگذارید ساختار را توضیح دهم:
- ما بیرونی داریم
modal-overlayDIV که کل صفحه را در بر می گیرد و به عنوان زمینه ما عمل می کند. - در داخل آن ، ما
modalDIV که حاوی محتوای واقعی ما است. - معین به سه بخش تقسیم می شود: هدر ، بدن و پاورقی.
- به ویژگی های دسترسی توجه کنید:
role="dialog"باaria-labelledbyوتaria-modal="true"بشر اینها برای خوانندگان صفحه نمایش بسیار مهم است.
در این مرحله ، اگر پرونده HTML را در یک مرورگر باز کنید ، عنوان و دکمه را مشاهده خواهید کرد ، اما معین هنوز سبک یا کاربردی نخواهد بود. بیایید آن را برطرف کنیم!
اضافه کردن CSS برای یک ظاهر جلا
حال بیایید سبکی را به معین خود اضافه کنیم. در section of our HTML, let’s add a tag:
:root {
--primary: #6d28d9;
--primary-light: #8b5cf6;
--dark: #1f2937;
--light: #f9fafb;
--gray: #6b7280;
--border: #e5e7eb;
--shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--transition: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 1.6;
color: var(--dark);
background-color: var(--light);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
}
.container {
max-width: 800px;
width: 100%;
text-align: center;
}
h1 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
color: var(--primary);
}
p {
margin-bottom: 2rem;
color: var(--gray);
}
من همیشه با متغیرهای CSS شروع می کنم زیرا آنها حفظ یک طرح رنگی مداوم را بسیار ساده تر می کنند. ما همچنین برخی از یک ظاهر طراحی اساسی برای صفحه را تنظیم کرده ایم.
حال ، بیایید سبک ها را برای دکمه ما اضافه کنیم:
/* Button Styles */
.btn {
display: inline-block;
background-color: var(--primary);
color: white;
font-weight: 600;
font-size: 1rem;
padding: 0.75rem 1.5rem;
border-radius: 0.375rem;
border: none;
cursor: pointer;
transition: var(--transition);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.btn:hover {
background-color: var(--primary-light);
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.btn:focus {
outline: 2px solid var(--primary-light);
outline-offset: 2px;
}
.btn:active {
transform: translateY(0);
}
.btn-secondary {
background-color: white;
color: var(--dark);
border: 1px solid var(--border);
}
.btn-secondary:hover {
background-color: var(--light);
}
من یک اثر شناور ظریف اضافه کردم که دکمه را کمی بلند می کند و سایه را تقویت می کند. این به کاربران بازخورد فوری می دهد که این عنصر تعاملی است.
اکنون ، بیایید مدال و روکش خود را سبک کنیم:
/* Modal Styles */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(3px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition), visibility var(--transition);
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal {
background-color: white;
border-radius: 0.5rem;
box-shadow: var(--shadow);
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
padding: 2rem;
position: relative;
transform: scale(0.9);
opacity: 0;
transition: transform var(--transition), opacity var(--transition);
}
.modal-overlay.active .modal {
transform: scale(1);
opacity: 1;
}
چند مورد مهم در اینجا اتفاق می افتد:
- روکش ثابت است و کل صفحه را پوشش می دهد.
- ما استفاده می کنیم
opacity: 0وتvisibility: hiddenبرای پنهان کردن معین در ابتدا. - وقتی
.activeکلاس اضافه می شود ، معین با یک انتقال صاف قابل مشاهده می شود. - ما استفاده می کنیم
transform: scale(0.9)برای ایجاد اثر “پاپ” هنگام باز شدن معین.
بیایید با یک ظاهر طراحی شده اجزای داخلی مودال ادامه دهیم:
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.modal-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--dark);
}
.modal-close {
background: none;
border: none;
cursor: pointer;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color var(--transition);
}
.modal-close:hover {
background-color: var(--border);
}
.modal-close:focus {
outline: 2px solid var(--primary-light);
outline-offset: 2px;
}
.modal-close-icon {
width: 1.25rem;
height: 1.25rem;
position: relative;
}
.modal-close-icon::before,
.modal-close-icon::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: var(--gray);
top: 50%;
left: 0;
}
.modal-close-icon::before {
transform: rotate(45deg);
}
.modal-close-icon::after {
transform: rotate(-45deg);
}
.modal-body {
margin-bottom: 1.5rem;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
}
من یک نماد “X” سفارشی برای دکمه بستن با استفاده از عناصر شبه CSS ایجاد کرده ام. این تکنیکی است که من دوستش دارم زیرا درخواست های HTTP را کاهش می دهد و کنترل کاملی را بر روی یک ظاهر طراحی می کند.
حال ، اجازه دهید برخی از انیمیشن ها را اضافه کنیم تا حالت معین ما جلا تر شود:
/* Animation for modal content */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-content {
animation: fadeIn 0.5s ease-out forwards;
}
این انیمیشن باعث می شود که محتوای داخل مودال محو شود و با باز شدن معین ، اندکی بکشید.
در آخر ، بیایید مطمئن شویم که معین ما در صفحه های کوچکتر پاسخگو است:
/* Responsive adjustments */
@media (max-width: 640px) {
.modal {
padding: 1.5rem;
}
.modal-footer {
flex-direction: column;
}
.modal-footer .btn {
width: 100%;
}
}
در دستگاه های تلفن همراه ، دکمه های پاورقی را به صورت عمودی جمع می کنیم تا فضای بیشتری به آنها بدهیم.
افزودن عملکرد JavaScript
اکنون که معین ما عالی به نظر می رسد ، بیایید آن را کاربردی کنیم. اضافه کردن a درست قبل از بسته شدن tag:
document.addEventListener('DOMContentLoaded', function() {
// Get DOM elements
const openModalBtn = document.getElementById('openModal');
const modalOverlay = document.getElementById('modalOverlay');
const closeModalBtn = document.getElementById('closeModal');
const cancelButton = document.getElementById('cancelButton');
const confirmButton = document.getElementById('confirmButton');
const modal = modalOverlay.querySelector('.modal');
// Store the element that had focus before the modal was opened
let previouslyFocusedElement;
// Function to open modal
function openModal() {
// Store the current focus
previouslyFocusedElement = document.activeElement;
// Show modal
modalOverlay.classList.add('active');
// Prevent background scrolling
document.body.style.overflow = 'hidden';
// Focus the close button
setTimeout(() => {
closeModalBtn.focus();
}, 100);
}
// Function to close modal
function closeModal() {
modalOverlay.classList.remove('active');
// Restore background scrolling
document.body.style.overflow = '';
// Restore focus
if (previouslyFocusedElement) {
previouslyFocusedElement.focus();
}
}
// Event listeners
openModalBtn.addEventListener('click', openModal);
closeModalBtn.addEventListener('click', closeModal);
cancelButton.addEventListener('click', closeModal);
confirmButton.addEventListener('click', function() {
alert('Confirmed!');
closeModal();
});
// Close modal when clicking outside
modalOverlay.addEventListener('click', function(e) {
if (e.target === modalOverlay) {
closeModal();
}
});
// Close modal with Escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && modalOverlay.classList.contains('active')) {
closeModal();
}
});
});
بیایید آنچه را که در اینجا اتفاق می افتد تجزیه کنیم:
- ما به همه عناصر DOM که برای تعامل نیاز داریم ، مراجعه می کنیم.
-
ما تعریف می کنیم
openModal()عملکردی که: -
عنصر متمرکز در حال حاضر را ذخیره می کند
-
اضافه می کند
.activeکلاس برای نشان دادن معین -
از پیمایش محتوای پس زمینه جلوگیری می کند
-
دکمه نزدیک را برای دسترسی متمرکز می کند
-
ما تعریف می کنیم
closeModal()عملکردی که: -
حذف
.activeکلاس برای پنهان کردن معین -
پیمایش پس زمینه را بازیابی می کند
-
تمرکز خود را به عنصری که قبل از باز شدن معین متمرکز شده بود ، باز می گردد
-
ما شنوندگان رویداد را برای:
-
با کلیک بر روی دکمه باز
-
با کلیک بر روی دکمه بستن
-
با کلیک بر روی دکمه Cancel
-
با کلیک بر روی دکمه تأیید (با یک هشدار ساده برای تظاهرات)
-
با کلیک بر روی مودال
-
فشار دادن کلید فرار
این به کاربران چندین روش برای تعامل با معین می دهد ، که برای یک تجربه خوب کاربر مهم است.
افزایش دسترسی با به دام انداختن فوکوس
یکی از ویژگی های مهم دسترسی که باید اضافه کنیم ، به دام انداختن تمرکز است. این امر باعث می شود تا کاربرانی که در حال حرکت با صفحه کلید هستند ، در حالی که باز است ، از برگه در خارج از معین استفاده کنند. این را به JavaScript خود اضافه کنید:
// Trap focus inside modal when open
document.addEventListener('keydown', function(e) {
if (!modalOverlay.classList.contains('active')) return;
// If Tab key is pressed
if (e.key === 'Tab') {
// Get all focusable elements in the modal
const focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
const firstElement = focusableElements[0];
const lastElement = focusableElements[focusableElements.length - 1];
// If shift + tab and focus is on first element, move to last element
if (e.shiftKey && document.activeElement === firstElement) {
e.preventDefault();
lastElement.focus();
}
// If tab and focus is on last element, move to first element
else if (!e.shiftKey && document.activeElement === lastElement) {
e.preventDefault();
firstElement.focus();
}
}
});
این کد با ایجاد “حلقه” از عناصر قابل تمرکز ، برای مطبوعات کلید برگه گوش می دهد و تمرکز خود را در معین نگه می دارد.
تست و عیب یابی
اکنون که معین خود را به پایان رسانده ایم ، بیایید آن را آزمایش کنیم تا اطمینان حاصل کنیم که همه چیز مطابق آنچه انتظار می رود کار می کند:
- پرونده HTML را در یک مرورگر باز کنید.
- روی دکمه “Open Modal” کلیک کنید – Modal باید با یک انیمیشن صاف ظاهر شود.
-
سعی کنید با استفاده از معین ، معین را ببندید:
-
دکمه X
-
دکمه لغو
-
با کلیک بر روی مودال
-
فشار دادن کلید فرار
-
ناوبری صفحه کلید را با فشار دادن برگه برای چرخه از طریق عناصر قابل تمرکز آزمایش کنید.
-
برای اطمینان از پاسخگویی ، در اندازه های مختلف صفحه نمایش آزمایش کنید.
اگر با هر مشکلی روبرو شدید ، در اینجا نکات مربوط به عیب یابی مشترک وجود دارد:
- اگر معین باز نمی شود ، برای خطاها کنسول JavaScript خود را بررسی کنید و تأیید کنید که شناسه های عنصر شما مطابقت دارد.
- اگر انیمیشن ها صاف نیستند ، سعی کنید زمان انتقال را تنظیم کنید یا از یک عملکرد تسکین متفاوت استفاده کنید.
- اگر به دام انداختن تمرکز کار نمی کند ، اطمینان حاصل کنید که معین شما حاوی عناصر قابل توجه است و انتخاب کننده در JavaScript صحیح است.
سفارشی کردن معین خود
اکنون که یک معین کار دارید ، می توانید به راحتی آن را متناسب با نیازهای خود تنظیم کنید:
- تغییر رنگ ها: متغیرهای CSS را در بالای صفحه شیوه به روز کنید.
- محتوا را تغییر دهید: متن نگهدارنده مکان را در بدنه معین جایگزین کنید.
- عناصر فرم را اضافه کنید: ورودی ها ، انتخاب ها یا سایر کنترل های شکل را در بدنه معین درج کنید.
- انیمیشن ها را تغییر دهید: زمان انتقال را تغییر دهید یا انیمیشن های جدید KeyFrame ایجاد کنید.
- عملکرد اضافی اضافه کنید: JavaScript را برای رسیدگی به فرم های ارسالی یا اقدامات دیگر گسترش دهید.
پایان
تبریک می گویم! شما با استفاده از فقط HTML ، CSS و JavaScript وانیل ، یک پنجره معین مدرن و در دسترس را از ابتدا ساخته اید. این رویکرد بدون تکیه بر کتابخانه های خارجی ، کنترل کامل بر ظاهر و رفتار معین خود را به شما می دهد.
این غذاهای مهم را بخاطر بسپارید:
- قابلیت دسترسی: همیشه ویژگی های مناسب آریا ، ناوبری صفحه کلید و مدیریت تمرکز را درج کنید.
- انیمیشن های صاف: انیمیشن های ظریف باعث می شوند UI شما احساس جلا و حرفه ای تر شود.
- چندین راه برای بستن: گزینه های مختلفی را برای برکناری معین به کاربران بدهید.
- طراحی پاسخگو: اطمینان حاصل کنید که معین شما در تمام اندازه صفحه نمایش خوب کار می کند.
امیدوارم این آموزش مفید بوده باشد! بازشو های معین یک مؤلفه UI همه کاره هستند که می توانند در هنگام استفاده مناسب ، تجربه کاربر را ارتقا بخشند. با دانشی که در اینجا به دست آورده اید ، می توانید برای هر پروژه ، مودال های سفارشی ایجاد کنید.
با معین جدید خود چه می کنید؟ فرم ورود؟ گفتگوی تأیید؟ یک گالری تصویر؟ امکانات بی پایان است!
