پنجره های پاپ آپ به صورت آنلاین همه جا وجود دارند، اما همه آنها بد نیستند. بیاموزید که چگونه با فناوری های وب استاندارد یک پنجره بازشو ایجاد کنید.
پنجره های بازشو که به خوبی طراحی شده اند، وب سایت شما را تعاملی تر و مدرن تر می کنند. آنها می توانند بازار ایجاد کنند و فروش را برای کسب و کارها افزایش دهند.
شما می توانید پنجره های بازشو با HTML، CSS و جاوا اسکریپت ایجاد کنید. از راهنمای زیر برای ایجاد و سبک دادن به یک پنجره بازشو از ابتدا استفاده کنید. این وب سایت شما را تعاملی می کند و تجربه کاربری عالی ایجاد می کند.
برای ساختاردهی محتوا HTML بنویسید
بیایید چند کد HTML بنویسیم که دارای یک پنجره مودال مخفی است که با کلیک کردن روی یک دکمه ظاهر می شود. در این صورت معنی کلمه Hello را نمایش می دهید! پنجره بازشو یک عنوان و مقداری محتوا خواهد داشت.
بلافاصله پنجره مودال را فعال می کنید، یک جلوه تار روی پس زمینه ایجاد می شود. کلاس‌هایی را به بخش‌هایی اضافه کنید که بعداً در جاوا اسکریپت برای انتخاب مدال استفاده خواهید کرد.
<body>
<button class="open-modal">Hello!</button>
<div class="modal-content hidden-modal">
<div class="modal-header">
<h3>Meaning of Hello!</h3>
<button class="close-modal">×</button>
</div>
<div class="modal-body">
<p>Hello is a greeting in the English language. It is used at
the start of a sentence as an introduction whether in person or
on the phone.</p>
</div>
</div>
<div class="blur-bg hidden-blur"></div>
<script src="script.js"></script>
</body>
صفحه باید به شکل زیر ظاهر شود:
اگر به دنبال استفاده از معنایی ترین نشانه گذاری هستید، می توانید عنصر گفتگوی HTML را نیز بررسی کنید. را
برای افزودن سبک، CSS بنویسید
از CSS برای فرمت کردن پنجره بازشو استفاده کنید. پنجره را در مرکز صفحه وب روی پس زمینه سیاه قرار دهید تا به وضوح قابل مشاهده باشد. شما همچنین به پنجره، پس زمینه و اندازه فونت آن استایل می دهید.
ابتدا با تنظیم حاشیه، padding و line-height یک استایل یکنواخت برای کل صفحه ایجاد کنید. سپس عناصر بدنه را در مرکز روی پس زمینه پشتی تراز کنید.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
line-height: 1;
}
body {
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background: #000;
gap: 30px;
}
سپس به دکمه open-modal استایل دهید. رنگ پس زمینه متفاوتی نسبت به بقیه صفحه به آن بدهید تا برجسته شود. همچنین، رنگ قلم، اندازه، padding و زمان انتقال آن را تنظیم کنید.
.open-modal {
background: #20c997;
color: #fff;
border: none;
padding: 20px 40px;
font-size: 48px;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s;
outline: none;
}
.open-modal:active {
transform: translateY(-17px);
}
سپس به محتوای مودال که با باز شدن پنجره نمایش داده می شود، استایل دهید. یک پس زمینه سفید تنظیم کنید، عرض آن را کمتر از بدنه قرار دهید و بالشتک اضافه کنید.
همچنین به آن یک z-index بدهید تا جلوی دکمه open-modal ظاهر شود. علاوه بر این، نمایشگر مخفی مدال را روی هیچ تنظیم کنید، بنابراین تا زمانی که آن را فعال نکنید، پنهان بماند.
.modal-content {
background: #ccc;
width: 500px;
padding: 20px;
border-radius: 10px;
z-index: 99;
}
.modal-header {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
color: #000;
font-size: 30px;
}
.modal-body p {
font-size: 22px;
line-height: 1.5;
}
.hidden-modal {
display: none;
}
سپس دکمه بستن مدال را با پس‌زمینه شفاف حالت دهید و آن را در مرکز تراز کنید.
.close-modal {
background: transparent;
border: none;
display: flex;
align-items: center;
justify-content: center;
height: 20px;
width: 20px;
font-size: 40px;
}
.close-modal:hover {
color: #fa5252;
}
در نهایت، به عنصر تاری که با باز شدن پنجره روی پس‌زمینه نمایش داده می‌شود، استایل دهید. حداکثر ارتفاع و عرض و فیلتر پس زمینه را خواهد داشت. تاری را روی هیچ تنظیم کنید، بنابراین تا زمانی که پنجره باز نشود قابل مشاهده نیست.
.blur-bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(5px);
}
.hidden-blur {
display: none;
}
پس از افزودن در CSS، صفحه باید به شکل زیر باشد:
پاپ آپ را با کد جاوا اسکریپت کنترل کنید
از جاوا اسکریپت برای باز و بسته کردن پنجره مدال با نمایش یا پنهان کردن آن استفاده خواهید کرد. شنوندگان رویداد را به دکمه اضافه کنید تا با کلیک روی آن باز و بسته شود.
ابتدا عناصر مربوطه را با استفاده از کلاس های CSS که در HTML تعریف کرده اید انتخاب کنید:
let modalContent = document.querySelector(".modal-content");
let openModal = document.querySelector(".open-modal");
let closeModal = document.querySelector(".close-modal");
let blurBg = document.querySelector(".blur-bg");
یک شنونده رویداد را به دکمه open-modal اضافه کنید تا با کلیک روی آن پنجره باز شود.
openModal.addEventListener("click", function () {
modalContent.classList.remove("hidden-modal");
blurBg.classList.remove("hidden-blur");
});
اقدامات مخالف را برای بستن پنجره بازشو انجام دهید، اما این بار آنها را در یک تابع نامگذاری شده قرار دهید. این رفتار برای چندین رویداد که ممکن است باعث بسته شدن پنجره مدال شود، کنترل می کند:
let closeModalFunction = function () {
modalContent.classList.add("hidden-modal")
blurBg.classList.add("hidden-blur")
}
شنوندگان رویداد را اضافه کنید تا کلیک‌های روی پس‌زمینه یا دکمه بستن و مواردی را که کاربر کلید Escape را فشار می‌دهد، مدیریت کند.
blurBg.addEventListener("click", closeModalFunction);
closeModal.addEventListener("click", closeModalFunction);
document.addEventListener("keydown", function (event) {
if (event.key === "Escape"
&& !modalContent.classList.contains("hidden")
) {
closeModalFunction();
}
});
حالا وقتی روی Hello کلیک می کنید! دکمه، مدال ظاهر می شود. با کلیک بر روی دکمه لغو در سمت راست پنجره می توانید آن را ببندید. کد را در codepen.io ببینید و با modal تعامل کنید:
موارد استفاده از ویندوز پاپ آپ
استفاده اصلی از پنجره های پاپ آپ/مدال در توسعه وب، تمرکز بر یک آیتم خاص در وب سایت است. پس از راه‌اندازی، بقیه صفحه را غیرفعال می‌کند و از کاربر می‌خواهد به آن توجه کند.
پنجره های بازشو رابط کاربری شما را متحرک می کنند. آنها می توانند هشدار دهند و توجه کاربران را به اطلاعات مهم در صفحه وب جلب کنند. برای حذف پنجره، کاربر باید نوعی عمل را انجام دهد. به این ترتیب کاربر با پنجره ارتباط برقرار می کند و اطلاعات مورد نظر را به دست می آورد.