ساخت فرم ورود پاپ آپ با CSS و جاوا اسکریپت
فرم ورود کاربر یکی از مهم ترین بخش هایی است که می توان در یک سایت به آن اشاره کرد تا کاربران با استفاده از آن بتوانند وارد سایت شوند، پس این قسمت هرچقدر با حساسیت بیشتر و زیباتری طراحی شود بهتر است توصیه میشود ( دوره آموزشی طراحی سایت ) را نیز مشاهده کنید
در این آموزش میخوایم بریم که یک فرم ورود رو به صورت پاپ آپ (PopUp) که زیبایی خاصی به فرم میده و دسترسی به فرم رو بسیار سریع تر میکنه ، با استفاده از CSS و جاوا اسکریپت طراحی کنیم
ویژگی های دوره
- تعداد جلسات 2
- امتحانات 0
- مدت 20 دقیقه
- سطح مهارت تمام سطوح
- زبان فارسی
- دانشجویان 1533
- ارزیابی ها بله
-
فهرست دروس
-
Zahrap
عالی
خیلی خیلی کامل و مفید
-
ahmad-esmaili
عاااااااااااااالی
عااااااااالی عااااااااااالی بود.
-
programmingWithrad
خوب بود
فقط یک سوال اگه بخوایم همونطوری که انیمیشن مانند و به حالت زوم میاد با کد @keyframes zoom{ from{ transform: scale(0); } to{ transform: scale(1); } } چیزی مثل این حالت به صورت زوم اوت هم بعد زدن close برگرده باید چیکار کنیم؟
20 دیدگاه
سلام
من میخواستم یه پاپ اپ یا صفحه جدید بعنوان کادر چت خصوصی درست کنم به این شکل که وقتی روی اسم یا آیکن یک کاربر کلیک کردیم یک کادر برای چت خصوصی با اون کاربر باز بشه
سلام.
برای اینکه بتونم بک اند نویس بشم میتونم از جاوا اسکریپت استفاده کنم؟؟
یا حتما باید php باشه؟؟؟
برای بک اند با جاوا اسکریپت باید nodejs رو یاد بگیرید
با سلام دوره عالیی بود دستتون درد نکنه .
قسمت دوم باز نمیشه چرا؟
سلام و درود
ثبت نام رایگان دوره رو بزنید
موفق و پیروز باشید
سلام استاد وقت بخیر من دو سوال داشتم.اگر میشه راهنمایی کنید چگونه می تونم وقتی کاربر ثبت نام کرد . مثلا در بخش پایین یک نوشته بیاد که ثبت نام با موفقیت انجام شد .و سوال دوم اینکه چطور میشه کاری کرد لیست افرادی که ثبت نام کرده اند را ببینم
سلام و درود
ببینید برای این موارد نیازه که سایت داینامیک باشه تا بتونید این کارهارو انجام بدید
داخل دوره پکیج جامع PHP از 0 تا 100 این موارد رو یاد میگرید که پیشنهاد میکنم حتما وارد PHP بشید و البته که یادگیری این زبان برای همه طراحان سایت الزامی هست
موفق و پیروز باشید
سلام. خیییییلی به دردم خورد. دستت درد نکنه. فقط کاش فایل ها رو هم میذاشتید.
سلام و درود
خوشحالیم که دوره ها براتون مفید واقع شدن
لینک دانلود سورس کد دوره داخل درس دوم قرار داده شد میتونید دانلود کنید
موفق و پیروز باشید
مثل همیشه بسیار عالی
سلام و دورد
سپاس بابت نظرات ارزشمندتون
موفق و پیروز باشید
سلام
وقت بخیر
چرا کدهای جاوا اسکریپت برا من کار نمیکنن ؟
مثلا جایی که باید 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 و یا وردپرس ست کردن این فرم با وردپرس و تبدیل کردن به فرم ورود وردپرس رو هم آموزش بدین
ممنون
سلام و درود
از اینکه همیشه با نظرات ارزشمندتون به ما انرژی میدید و مارو همراهی میکنید از شما سپاسگذاریم
دوره های درخواستی شما و تمام دوستان عزیز آموزش تک همه در دستور کار قرار خواهند گرفت اما طبیعتا زمان زیادی خواهند برد
در نهایت از صبر و شکیبایی شما عزیزان سپاسگذاریم
موفق و پیروز باشید