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

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



  آیا می دانید تا کنون 6339 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

animatedModal : پلاگین jQuery برای قرار دادن modal زیبا

8 2031 ۲۶ اسفند ۹۳

در این مطلب میخوام یک پلاگین jQuery بنام animatedModal رو خدمت شما معرفی کنم و اونو آموزش بدم.

animatedModal

با استفاده از این پلاگین میتونین براحتی هر چه تمامتر برای سایتتون lightbox تمام صفحه زیبایی رو بسازید که بصورت انیمیشنی باز و بسته میشه. این پلاگین میتونه سایتتون رو زیبا کنه. این پلاگین بر روی تمام مرورگرهای مدرن و IE10 به بالا پشتیبانی میشه.

میبینید که هر گاه روی لینک "کلیک کنید" ، کلیک میکنید یک lightbox باز میشه که کل صفحه رو میپوشونه. با زدن روی دکمه بستن هم لایت باکس بسته خواهد شد.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به animate.min.css و jquery.min.js و animatedModal.min.js نیاز داریم. این فایلهارو در انتهای مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. اولین کاری که باید بکنیم اینه که یک لینک برای باز شدن لایت باکس قرار بدیم  ، بصورت زیر :

میبینید که id = demo رو برای اون انتخاب کردیم. درون خاصیت href هم باید آدرس اون لایت باکسی که مد نظرمونه رو بهش بدیم. محتویات هر لایت باکس رو باید درون یک div قرار بدین و برای اون هم یک id مشخص کنید. این id که مشخص میکنید باید همون مقداری باشه که به خاصیت href لینکتون نسبت دادین. بصورت زیر :

حالا باید دو چیز رو درون این لایت باکس قرار بدین.

  1. المنتی برای بستن لایت باکس :
    برای اینکار یک div قرار بدین و یک کلاس بهش نسبت بدین. این کلاسی که نسبت میدین باید با close شروع بشه و بعد از اون نام لایت باکسی که درونش قرار داره. بصورت زیر :
  2. المنتی برای نگه داشتن محتویات لایت باکس :
    برای اینکار باید یک div با class = modal-content قرار بدین و محتویات مورد نظرتون رو درونش قرار بدین. بصورت زیر :

حالا یک سری کد CSS مینویسیم تا ظاهرش بهتر بشه :

حالا برای راه انداختن لایت باکس باید در تگ اسکریپت نهایی کد زیر رو قرار بدین :

میبینید که در ابتدا لینک مورد نظر رو انتخاب کردیم و متد animatedModal رو برای اون فراخوانی کردیم. با اینکار لایت باکس درست میشه ولی تنظیمات پیش فرض روی اون اعمال شده. تعدادی از ویژگی های این پلاگین رو در زیر قرار دادم :

  •  color : با استفاده از این ویژگی میتونین رنگ پس زمینه لایت باکس رو مشخص کنید
  • animatedIn : نام انیمیشنی که قصد دارید در لحظه باز شدن لایت باکس اتفاق بیوفته
  • animatedOut : نام انیمیشنی که قصد دارید در لحظه بستن لایت باکس اتفاق بیوفته
  • overflow : میتونین مشخص کنید که لایت باکسی که باز بشه محتویات خارج از محدوده مرورگر رو مخفی کنه یا با اسکرول اونا رو نشون بده. مقادیر hidden و auto و scroll رو دریافت میکنه.

این ابزار برای قرار دادن انیمیشنها از سایت animate.css استفاده کرده. بنابراین برای اینکه نام انیمیشن مورد نظرتون در کد بالا رو مشخص کنید ، باید به اون سایت برید و انیمیشن مورد نظرتونو انتخاب کنید و قرار بدین.

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

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

  • ‏‏

    درود بر شما،مطالبهای مرتبط شما رو مطالعه کردم،خدا قوت! بسیار عالی
    آفرین بر شما

  • ‏‏

    با سلام
    منم مرتب مطالب و پلاگین هایی رو که میگذارید دنبال میکنم. خیلی ممنون از شما

  • ‏‏

    بلاگین جالبیه ممنونم 😛 ❓ 😎

  • ‏‏
    افشین زندی(۲۹ فروردین ۱۳۹۴)

    پلاگین خیلی زیبایی بود. ممنون آقای اسفندیاری
    امید وارم که به همین روال آموزشاتون ادامه دار باشه

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram