آموزش ساخت کادر پاپ آپ در طراحی سایت

آموزش ساخت کادر پاپ آپ در طراحی سایتReviewed by جواد نبوی on Sep 29Rating: 4.0

آموزش ساخت کادر پاپ آپ در سایت

سلام؛ کادر ها یا پنجره های پاپ آپ، یکی از عناصر جذاب در طراحی سایت هستند. معمولا کاربران عناصر انیمیشنی و متحرک را دوست دارند. به همین دلیل بهتر است بعضی چیز ها را به جای اینکه به صورت مستقیم و درون خود صفحه بگنجانید، در چنین کادر های پاپ آپی قرار دهید. چرا که هم جلوی شلوغ شدن صفحه را میگیرد، و هم زیبایی سایت شما را چند برابر می کند. مثلا فرض کنید در سایت خود یک فرم ثبت نام دارید. قطعا اگر این فرم ثبت نام پس از کلیک کردن روی دکمه ثبت نام درون یک کادر پاپ آپ نمایش داده شود جذابیتی بسیار بیشتر از گنجاندن کل فرم ثبت نام درون صفحه دارد. بهتر است ببینیم چطور میتوان چنین کادر های پاپ آپی را در سایت خود بسازیم. با ادامه مطلب آموزش ساخت کادر پاپ آپ در طراحی سایت آپ همراه باشید.

برای ساخت کادر پاپ آپ به چه چیز هایی نیاز داریم؟

برای ساخت اینگونه کادر ها، از زبان های HTML، CSS و جاوااسکریپت استفاده می کنیم.

اولین قدم ساخت کادر پاپ آپ

در اولین قدم شما باید کد HTML زیر را به سند اچ تی ام ال خود اضافه کنید:

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

<!-- Modal content -->
 <div class="modal-content">
 <span class="close">x</span>
 <p>Some text in the Modal..</p>
 </div>

</div>

در این کد ما یک دکمه ساخته ایم که قرار است با کلیک روی آن، کادر پاپ آپ باز شود. این دکمه با تگ button ساخته شده و ID یا شناسه myBtn را به آن نسبت داده ایم. بعدا در جاوااسکریپت یک تابع تعریف می کنیم که از این شناسه استفاده می کند و زمانی که روی دکمه ای با این شناسه کلیک شد تابع اجرا می شود. وقتی تابع اجرا شد عملیات باز شدن پنجره پاپ آپ انجام می شود.

در خطوط بعدی یک باکس به عنوان کادر پاپ آپ ایجاد کرده ایم که دارای کلاس modal و شناسه myModal است. درون این کادر اطلاعاتی مثل متن و دکمه بستن کادر قرار گرفته. این کادر در مرحله ی بعدی با استفاده از CSS مخفی می شود. سپس با جاوااسکریپت کاری می کنیم که با کلیک روی دکمه، کادر از حالت مخفی خارج شده و در صفحه نمایان شود.

دومین قدم ساخت پنجره پاپ آپ

در دومین مرحله باید یک کد CSS به فایل استایل خود اضافه کنید. کد زیر را به فایل style یا به صورت توکار درون سند html قرار دهید:

/* The Modal (background) */
.modal {
 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 1; /* Sit on top */
 left: 0;
 top: 0;
 width: 100%; /* Full width */
 height: 100%; /* Full height */
 overflow: auto; /* Enable scroll if needed */
 background-color: rgb(0,0,0); /* Fallback color */
 background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
 background-color: #fefefe;
 margin: 15% auto; /* 15% from the top and centered */
 padding: 20px;
 border: 1px solid #888;
 width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
 color: #aaa;
 float: right;
 font-size: 28px;
 font-weight: bold;
}

.close:hover,
.close:focus {
 color: black;
 text-decoration: none;
 cursor: pointer;
}

میبینید به کلاس modal که مربوط به کادر پاپ آپ بود خاصیت display:none را دادیم. یعنی مخفی اش کردیم. در بقیه خطوط هم ظاهر کادر و محتویاتش را تعیین کردیم. نکته مهم در این کد همان مخفی کردنش بود.

قدم سوم آموزش ساخت کادر پاپ آپ

در آخرین قدم باید کد جاوااسکریپت زیر را به سند html خود قبل از تگ پایان </body> اضافه کنید.

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
 modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
 modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
 if (event.target == modal) {
 modal.style.display = "none";
 }
}
</script>

در این کد در ابتدا چند متغیر تعریف کردیم و برای هر کدام شناسه ای که در html مشخص کرده بودیم را قرار دادیم. سپس آمدیم چند تابع ساختیم تا اگر مثلا روی دکمه باز کردن پاپ آپ کلیک شد، این توابع اجرا شوند و خاصیت display کادر پاپ آپ را به حالت block در بیاورند تا پنجره پاپ آپ نمایش داده شود. همچنین برای دکمه ضربدر یا بستن پاپ آپ هم چنین عملیاتی انجام می شود.

تمام شد. حالا میتوانید درون این پاپ آپ هر چیزی که میخواهید را قرار دهید. نمونه زیر را هم به عنوان پیش نمایش ما ببینید. البته این نمونه پیشرفته تر است و دارای هدر و فوتر می باشد! برای مشاهده کد اصلی اش هم روی صفحه راست کلیک کرده و View page source را برگزینید. همچنین اگر میخواهید پنجره های پاپ آپ حرفه ای در وردپرس بسازید حتما آموزش ساخت پاپ آپ با افزونه Layered Popups را ببینید. با آرزوی موفقیت برای همه ی شما.

تبلیغات

نویسنده (مدیر سایت)

جواد نبوی هستم. حدود 7 سالی میشه در زمینه طراحی وب و گرافیک کار می کنم و بعد از توپ دیزاین، این دومین سایت آموزش طراحی وب و گرافیک هستش که راه انداختم. امیدوارم بتونم برای همه ی شما مفید باشم.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *