• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

در این مطلب و مطالب بعدی ، تعدادی نمونه کد زیبا برای Overlay در اختیارتون میزارم. Overlay به چیزی میگن که طی شرایط خاصی ظاهر میشه و روی بقیه عناصر قرار میگیره و کل صفحه رو میپوشونه. در این Overlay منو قرار داده شده.

برای باز شدن Overlay باید بر روی دکمه Open Overlay کلیک کنید.

همونطور که میبینید ، زمانی که Overlay باز میشه ، میتونین با کلیک بر روی علامت x در بالا و سمت راست ، Overlay رو ببندید.

کدهای HTML :

در این نمونه از classie.js استفاده شده است.

کدهای CSS :

کدهای Javascript :

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

Source

نوع کد رايگان

دیدگاه ها 8 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    وحید صالحی(۵ دی ۱۳۹۳)

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

  • ‏‏
    irandroid gigfa com(۵ دی ۱۳۹۳)

    زیبا بود. :)
    ممنون

    (^_ ^)

  • ‏‏

    وقتی روی دکمه کلیک می کنیم یه قسمت ظاهر میشه که برای بستنش حتما باید روی ضربدر بالا و گوشته اون قسمت کلیک کنیم.حالا اگه نخواسته باشیم حتما کاربر روی اون ضربدر کلیک کنه تا اون قسمت بسته بشه باید چیکار کنیم.مثلا کاربر اگر بر روی بیرون اون قسمت کلیک کنه اون قسمت بسته بشه.از چه کدی استفاده میشه؟

    • ‏‏
      محمد اسفندیاری(۶ دی ۱۳۹۳)

      داداش این کدها مربوط به Overlay هستن…..Overlay کل صفحه رو میپوشونه……اگر بخواین یک Popup درست کنید که با کلیک کردن بر خارج اون بسته بشه ، در نت مطلب زیاد وجود داره……در آینده هم خودم قرار میدم
      موفق باشید

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram