ساخت فرم ورود پاپ آپ با CSS و جاوا اسکریپت
فرم ورود کاربر یکی از مهم ترین بخش هایی است که می توان در یک سایت به آن اشاره کرد تا کاربران با استفاده از آن بتوانند وارد سایت شوند، پس این قسمت هرچقدر با حساسیت بیشتر و زیباتری طراحی شود بهتر است
در این آموزش میخوایم بریم که یک فرم ورود رو به صورت پاپ آپ (PopUp) که زیبایی خاصی به فرم میده و دسترسی به فرم رو بسیار سریع تر میکنه ، با استفاده از CSS و جاوا اسکریپت طراحی کنیم
ویژگی های دوره
- درس 2
- آزمون ها 0
- مدت 20 دقیقه
- سطح مهارت تمام سطوح
- زبان فارسی
- تعداد شرکت کنندگان 509
- ارزیابی ها بله
-
فهرست دروس
-
ahmad-esmaili
عاااااااااااااالی
عااااااااالی عااااااااااالی بود.
-
programmingWithrad
خوب بود
فقط یک سوال اگه بخوایم همونطوری که انیمیشن مانند و به حالت زوم میاد با کد @keyframes zoom{ from{ transform: scale(0); } to{ transform: scale(1); } } چیزی مثل این حالت به صورت زوم اوت هم بعد زدن close برگرده باید چیکار کنیم؟
12 دیدگاه
سلام. خیییییلی به دردم خورد. دستت درد نکنه. فقط کاش فایل ها رو هم میذاشتید.
سلام و درود
خوشحالیم که دوره ها براتون مفید واقع شدن
لینک دانلود سورس کد دوره داخل درس دوم قرار داده شد میتونید دانلود کنید
موفق و پیروز باشید
مثل همیشه بسیار عالی
سلام و دورد
سپاس بابت نظرات ارزشمندتون
موفق و پیروز باشید
سلام
وقت بخیر
چرا کدهای جاوا اسکریپت برا من کار نمیکنن ؟
مثلا جایی که باید display modalرو blockمیکردم؟ رو من جواب نگرفتم
ممنون میشم جوب بدین
سلام و دورد
لطفا دوره رو با دقت بیشتری مشاهده کنید و کدهاتون رو با کد نوشته شده در دوره مقایسه کنید که جایی رو اشتباه ننوشته باشید چون اگر دقیقا مشابه دوره پیش برید حتما نتیجه یکسان خواهد بود
در صورتی که بازم مشکل داشتید از طریق آی دی تلگرام صفحه تماس با ما مشکلتون رو به ما ارجاع بدید
موفق و پیروز باشید
سلام فایل index.htmi از کجا بگیرم
سلام و دورد
یک فایل متنی با نام index و پسوند html ایجاد کنید و ساختار html رو داخلش بنویسید
در صورتی که در در ابتدای کار هستید پیشنهاد میکنیم دوره های رایگان قبلی که در سایت قرار گرفتن رو هم مشاهده کنید
موفق و پیروز باشید
سلام
خسته نباشید خیلی خوب بود
فقط یک سوالی دارم
اگر بخوایم همونطور که بعد نوشتن کد
@keyframes zoom{
from{
transform: scale(0);
}
to{
transform: scale(1);
}
}
به حالت انیمیشنی زوم این شد
به همین حالتم زوم اوت شه بعد زدن close چه کدی رو براش بنویسیم
سلام و درود
ممنون از نظر ارزشمند شما
برای اینکار به جای استفاده از keyframes از transition استفاده کنید به این صورت که به پاپ آپ یک transition اختصاص داده و مثلا top رو -500px قرار بدید تا از صفحه خارج بشه و بعد یک کلاس تعریف کنید که top رو به فرض مثال به 30% تغییر میده بعد داخل جاوا اسکریپت این کلاس رو برای پاپ آپ خودتون toggle کنید یا از classList استفاده کنید به این صورت میتونید هم برای show و هم برای close انیمیشن داشته باشید
موفق و پیروز باشید
سلام و خسته نباشید
باز هم آموزش های شما بی نظیر و بدون نقصه , این آموزش هم مثل تمام اموزش هاتون عالی بود فقط یه درخواستی داشتم که اگه ممکنه در بخش php و یا وردپرس ست کردن این فرم با وردپرس و تبدیل کردن به فرم ورود وردپرس رو هم آموزش بدین
ممنون
سلام و درود
از اینکه همیشه با نظرات ارزشمندتون به ما انرژی میدید و مارو همراهی میکنید از شما سپاسگذاریم
دوره های درخواستی شما و تمام دوستان عزیز آموزش تک همه در دستور کار قرار خواهند گرفت اما طبیعتا زمان زیادی خواهند برد
در نهایت از صبر و شکیبایی شما عزیزان سپاسگذاریم
موفق و پیروز باشید