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

- visibility ٨ mode_comment

در این مطلب میخوام یک پلاگین 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 استفاده کرده. بنابراین برای اینکه نام انیمیشن مورد نظرتون در کد بالا رو مشخص کنید ، باید به اون سایت برید و انیمیشن مورد نظرتونو انتخاب کنید و قرار بدین.

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

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

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

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

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

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

سوران

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

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

رحمت

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

موفق باشید قربان

افشین زندی

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

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

نیاز به لاگین

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