• صفحه اصلی
  • وب
    • آموزش HTML
    • آموزش CSS
    • آموزش جاوا اسکریپت
    • آموزش jquery
    • آموزش بوت استرپ
    • آموزش PHP
    • آموزش وردپرس
  • طراحی
    • ایلوستریتور
    • فتوشاپ
  • انیمیشن و سه بعدی
    • افترافکت
    • سینمافوردی
  • کسب و کار
    • بازاریابی
    • نرم افزار های آفیس
  • تدریس در آموزش تک
  • درباره ما
  • تماس با ما
      • عضویتورود
    آموزش تک
    • صفحه اصلی
    • وب
      • آموزش HTML
      • آموزش CSS
      • آموزش جاوا اسکریپت
      • آموزش jquery
      • آموزش بوت استرپ
      • آموزش PHP
      • آموزش وردپرس
    • طراحی
      • ایلوستریتور
      • فتوشاپ
    • انیمیشن و سه بعدی
      • افترافکت
      • سینمافوردی
    • کسب و کار
      • بازاریابی
      • نرم افزار های آفیس
    • تدریس در آموزش تک
    • درباره ما
    • تماس با ما
        • عضویتورود

      آموزش CSS

      • خانه
      • همه دوره ها
      • وب
      • ساخت فرم ورود پاپ آپ با CSS و جاوا اسکریپت

      ساخت فرم ورود پاپ آپ با CSS و جاوا اسکریپت

      User Avatar
      کریم مصطفی زاده
      آموزش CSS, آموزش جاوا اسکریپت, وب
      (3 نظر)
      رایگان
      • توضیحات
      • فهرست دروس
      • مدرس:
      • امتیازدهی به دوره

      فرم ورود کاربر یکی از مهم ترین بخش هایی است که می توان در یک سایت به آن اشاره کرد تا کاربران با استفاده از آن بتوانند وارد سایت شوند، پس این قسمت هرچقدر با حساسیت بیشتر و زیباتری طراحی شود بهتر است توصیه میشود ( دوره آموزشی طراحی سایت ) را نیز مشاهده کنید

      در این آموزش میخوایم بریم که یک فرم ورود رو به صورت پاپ آپ (PopUp) که زیبایی خاصی به فرم میده و دسترسی به فرم رو بسیار سریع تر میکنه ، با استفاده از CSS و جاوا اسکریپت طراحی کنیم

      آموزش طراحی سایت

      ویژگی های دوره

      • تعداد جلسات 2
      • امتحانات 0
      • مدت 20 دقیقه
      • سطح مهارت تمام سطوح
      • زبان فارسی
      • دانشجویان 1533
      • ارزیابی ها بله
      دوره هاوبآموزش CSSساخت فرم ورود پاپ آپ با CSS و جاوا اسکریپت
      • فهرست دروس
        2
        • درس1.1
          فرم ورود پاپ آپ قسمت اول 10 min
        • درس1.2
          فرم ورود پاپ آپ قسمت دوم 10 min
      آواتار نویسنده
      کریم مصطفی زاده

      نظرات

      میانگین امتیازها

      5
      3 امتیاز

      جزئیات امتیاز

      5
      100%
      4
      0%
      3
      0%
      2
      0%
      1
      0%
      • Zahrap

        عالی

        خیلی خیلی کامل و مفید

      • ahmad-esmaili

        عاااااااااااااالی

        عااااااااالی عااااااااااالی بود.

      • programmingWithrad

        خوب بود

        فقط یک سوال اگه بخوایم همونطوری که انیمیشن مانند و به حالت زوم میاد با کد @keyframes zoom{ from{ transform: scale(0); } to{ transform: scale(1); } } چیزی مثل این حالت به صورت زوم اوت هم بعد زدن close برگرده باید چیکار کنیم؟

      • توضیحات
      • فهرست دروس
      • مدرس:
      • امتیازدهی به دوره
      رایگان
      • اشتراک گذاری :

      دوره های مرتبط

      آموزش دو زبانه کردن سایت با جاوا اسکریپت مشاهده
      کریم مصطفی زاده

      آموزش دو زبانه کردن سایت با جاوا اسکریپت

      770
      0
      رایگان
      آموزش ساخت چک باکس متحرک با CSS مشاهده
      امیرحسین اسماعیل زاده

      آموزش ساخت چک باکس متحرک با CSS

      1019
      0
      رایگان
      آموزش flexbox – مهم برای طراحی وب مشاهده
      کریم مصطفی زاده

      آموزش flexbox - مهم برای طراحی وب

      1433
      3
      رایگان
      آموزش ساخت اسلایدر در جاوا اسکریپت مشاهده
      کریم مصطفی زاده

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

      2290
      3
      رایگان
      آموزش جی کوئری (jquery) از مقدماتی تا پیشرفته + پروژه های عملی مشاهده
      کریم مصطفی زاده

      آموزش جی کوئری (jquery) از مقدماتی تا پیشرفته + پروژه های عملی

      435
      4
      188,000 تومان 99,000 تومان

        20 دیدگاه

      1. falcon
        مارس 4, 2021
        پاسخ

        سلام
        من میخواستم یه پاپ اپ یا صفحه جدید بعنوان کادر چت خصوصی درست کنم به این شکل که وقتی روی اسم یا آیکن یک کاربر کلیک کردیم یک کادر برای چت خصوصی با اون کاربر باز بشه

      2. REMO
        اکتبر 27, 2020
        پاسخ

        سلام.
        برای اینکه بتونم بک اند نویس بشم میتونم از جاوا اسکریپت استفاده کنم؟؟
        یا حتما باید php باشه؟؟؟

        • کریم مصطفی زاده
          اکتبر 31, 2020
          پاسخ

          برای بک اند با جاوا اسکریپت باید nodejs رو یاد بگیرید

      3. avalori-ir
        می 27, 2020
        پاسخ

        با سلام دوره عالیی بود دستتون درد نکنه .

      4. mahh
        می 9, 2020
        پاسخ

        قسمت دوم باز نمیشه چرا؟

        • کریم مصطفی زاده
          می 9, 2020
          پاسخ

          سلام و درود

          ثبت نام رایگان دوره رو بزنید

          موفق و پیروز باشید

      5. Admin bar avatar
        wizard
        آوریل 9, 2020
        پاسخ

        سلام استاد وقت بخیر من دو سوال داشتم.اگر میشه راهنمایی کنید چگونه می تونم وقتی کاربر ثبت نام کرد . مثلا در بخش پایین یک نوشته بیاد که ثبت نام با موفقیت انجام شد .و سوال دوم اینکه چطور میشه کاری کرد لیست افرادی که ثبت نام کرده اند را ببینم

        • کریم مصطفی زاده
          آوریل 10, 2020
          پاسخ

          سلام و درود

          ببینید برای این موارد نیازه که سایت داینامیک باشه تا بتونید این کارهارو انجام بدید

          داخل دوره پکیج جامع PHP از 0 تا 100 این موارد رو یاد میگرید که پیشنهاد میکنم حتما وارد PHP بشید و البته که یادگیری این زبان برای همه طراحان سایت الزامی هست

          موفق و پیروز باشید

      6. ahmad-esmaili
        ژوئن 5, 2019
        پاسخ

        سلام. خیییییلی به دردم خورد. دستت درد نکنه. فقط کاش فایل ها رو هم میذاشتید.

        • کریم مصطفی زاده
          ژوئن 6, 2019
          پاسخ

          سلام و درود

          خوشحالیم که دوره ها براتون مفید واقع شدن
          لینک دانلود سورس کد دوره داخل درس دوم قرار داده شد میتونید دانلود کنید

          موفق و پیروز باشید

      7. K86-Dom
        می 30, 2019
        پاسخ

        مثل همیشه بسیار عالی

        • کریم مصطفی زاده
          می 30, 2019
          پاسخ

          سلام و دورد

          سپاس بابت نظرات ارزشمندتون

          موفق و پیروز باشید

      8. amir12
        آوریل 14, 2019
        پاسخ

        سلام
        وقت بخیر
        چرا کدهای جاوا اسکریپت برا من کار نمیکنن ؟
        مثلا جایی که باید display modalرو blockمیکردم؟ رو من جواب نگرفتم
        ممنون میشم جوب بدین

        • کریم مصطفی زاده
          آوریل 14, 2019
          پاسخ

          سلام و دورد

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

          موفق و پیروز باشید

      9. mohammadofficial82
        مارس 19, 2019
        پاسخ

        سلام فایل index.htmi از کجا بگیرم

        • کریم مصطفی زاده
          مارس 20, 2019
          پاسخ

          سلام و دورد

          یک فایل متنی با نام index و پسوند html ایجاد کنید و ساختار html رو داخلش بنویسید
          در صورتی که در در ابتدای کار هستید پیشنهاد میکنیم دوره های رایگان قبلی که در سایت قرار گرفتن رو هم مشاهده کنید

          موفق و پیروز باشید

      10. saberzx
        سپتامبر 19, 2018
        پاسخ

        سلام
        خسته نباشید خیلی خوب بود
        فقط یک سوالی دارم
        اگر بخوایم همونطور که بعد نوشتن کد
        @keyframes zoom{
        from{
        transform: scale(0);
        }
        to{
        transform: scale(1);
        }
        }
        به حالت انیمیشنی زوم این شد
        به همین حالتم زوم اوت شه بعد زدن close چه کدی رو براش بنویسیم

        • کریم مصطفی زاده
          سپتامبر 20, 2018
          پاسخ

          سلام و درود

          ممنون از نظر ارزشمند شما

          برای اینکار به جای استفاده از keyframes از transition استفاده کنید به این صورت که به پاپ آپ یک transition اختصاص داده و مثلا top رو -500px قرار بدید تا از صفحه خارج بشه و بعد یک کلاس تعریف کنید که top رو به فرض مثال به 30% تغییر میده بعد داخل جاوا اسکریپت این کلاس رو برای پاپ آپ خودتون toggle کنید یا از classList استفاده کنید به این صورت میتونید هم برای show و هم برای close انیمیشن داشته باشید

          موفق و پیروز باشید

      11. amirrezaei
        آگوست 10, 2018
        پاسخ

        سلام و خسته نباشید
        باز هم آموزش های شما بی نظیر و بدون نقصه , این آموزش هم مثل تمام اموزش هاتون عالی بود فقط یه درخواستی داشتم که اگه ممکنه در بخش php و یا وردپرس ست کردن این فرم با وردپرس و تبدیل کردن به فرم ورود وردپرس رو هم آموزش بدین

        ممنون

        • کریم مصطفی زاده
          آگوست 10, 2018
          پاسخ

          سلام و درود

          از اینکه همیشه با نظرات ارزشمندتون به ما انرژی میدید و مارو همراهی میکنید از شما سپاسگذاریم
          دوره های درخواستی شما و تمام دوستان عزیز آموزش تک همه در دستور کار قرار خواهند گرفت اما طبیعتا زمان زیادی خواهند برد
          در نهایت از صبر و شکیبایی شما عزیزان سپاسگذاریم

          موفق و پیروز باشید

      یک دیدگاه ارسال کنید لغو پاسخ

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

      آموزش طراحی سایت

      آموزش 0 تا 100 طراحی سایت و طراحی قالب وردپرس

      جامع ترین دوره طراحی سایت

      کانال تلگرام آموزش تک

      دسته بندی ها

      • #C (7)
      • 3Ds Max (1)
      • آموزش CSS (16)
      • آموزش HTML (10)
      • آموزش JQuery (4)
      • آموزش PHP (7)
      • آموزش Python (2)
      • آموزش بوت استرپ (3)
      • آموزش جاوا اسکریپت (4)
      • آموزش وردپرس (10)
      • افترافکت (55)
      • اندروید (3)
      • انیمیشن و سه بعدی (58)
        • 3Ds Max (1)
        • افترافکت (55)
        • سینمافوردی (2)
      • ایلوستریتور (13)
      • بازاریابی (15)
      • برترین ها (8)
      • برنامه نویسی (10)
        • #C (7)
        • اندروید (3)
      • پکیج (4)
      • سئو (1)
      • سیستم عامل (2)
        • لینوکس (2)
      • سینمافوردی (2)
      • طراحی (46)
        • ایلوستریتور (13)
        • فتوشاپ (39)
      • فتوشاپ (39)
      • فیلم و صدا (1)
        • موسیقی (1)
      • کسب و کار (17)
        • بازاریابی (15)
        • نرم افزار های آفیس (2)
      • لینوکس (2)
      • مارکتینگ (1)
        • سئو (1)
      • موسیقی (1)
      • نرم افزار های آفیس (2)
      • وب (46)
        • آموزش CSS (16)
        • آموزش HTML (10)
        • آموزش JQuery (4)
        • آموزش PHP (7)
        • آموزش Python (2)
        • آموزش بوت استرپ (3)
        • آموزش جاوا اسکریپت (4)
        • آموزش وردپرس (10)
        • وبلاگ (1)
      • وبلاگ (1)
      • ویژه (8)
      شبکه های اجتماعی ما
      صفحات ما

      تدریس در آموزش تک

      وبلاگ آموزش تک

      تماس با ما

      درباره ما

      دسترسی سریع

      صفحه اصلی

      طراحی سایت

      افترافکت

      گرافیک

       

      درباره آموزش تک

      آموزش تک با هدف ایجاد بستری برای تولید آموزش هایی تخصصی و در پی آن پرورش متخصص پا به عرصه آموزش گذاشت و همواره سعی دارد  تا متناسب با نام خودش ( آموزش تک ) بهترین و با کیفیت ترین آموزش ها را در بستری مناسب به صورت آنلاین برای جامعه ی دانش پژوه آماده کند.

      تمامی حقوق مادی و معنوی این وبسایت متعلق به آموزش تک می باشد و هر گونه کپی برداری از محتوا و محصولات سایت غیر مجاز و پیگرد قانونی دارد.

      ورود با :

      ورود با Google ورود با Twitter ورود با LinkedIn

      با حساب کاربری خود وارد شوید

      رمز عبور خود را فراموش کرده اید؟

      آیا هنوز عضو نشده اید؟ ثبت نام کنید

      یک حساب جدید ثبت کنید

      آیا شما عضو هستید؟ اکنون وارد شوید

      Modal title

      Message modal