افکتهای زیبا برای ( Overlay ) پوشش کامل صفحه ( نمونه اول )

- visibility ٨ mode_comment

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

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

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

کدهای HTML :

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

کدهای CSS :

کدهای Javascript :

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

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

Source

comment دیدگاه کاربران

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

محمد اسفندیاری

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

زیبا بود. 🙂
ممنون

(^_ ^)

محمد اسفندیاری

خواهش میکنم
موفق باشید

Mahdi

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

محمد اسفندیاری

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

علی

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

محمد اسفندیاری

بفرمایید دوست عزیز
http://s.7Learn.com/uploads/2015/05/sample.zip

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.