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

ک

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

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

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

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

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

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

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

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

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

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

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

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

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

از کارشناسان پرگاس انفورماتیک مشاوره تخصصی بگیرید

نرم افزار باشگاه مشتریان, طراحی سایت اختصاصی، نرم افزار مالی سپیدار

۵۶ ۲۸۴ ۲۸۴ (۰۲۱)