آموزش طراحی مدال modal در طراحی سایت همراه ویدئو

سلام خوش اومدین! امروز یه مُدال یا modal (اسمشو درست تلفظ کنید مثل بعضیا نباشید 😆 ) درست کردیم در عین کارایی بالا طراحی بسیار خوبی داره و ساعت ها وقت گذاشته شد براش!

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

سایت ها از مدال ها واسه (CTA (Call To Action استفاده میکنن(یعنی کاربر یه کاری تو سایت انجام بده و همینجوری صفحه رو نبنده). این یه مثال ساده بود و با مدال ها میشه خیلی کارا انجام داد مثلا یکیش همین فرم ثبت نام یا ثبت ایمیل و…

تکنیک های نمایش مدال

خیلیا پاپ آپ رو تنظیم میکنن بعد چند ثانیه که صفحه کامل لود شد پاپ آپ هم باز بشه! به نظر من خیلی کار بی نتیجه ایه بنابراین، این روش بدترین روش نمایش مدال هست مگر این که واسه چیزهایی مثل کوکی ها و یا adblock ها بکار روند.
در زیر به متداول ترین تکنیک ها اشاره خواهد شد:

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

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

مدال های زمان دار که بعد از x دقیقه/ ثانیه اجرا می شوند.

مدال های موقعیتی که هنگامی که کاربر توسط اسکرول به محل مورد نظر می رسد اجرا می شوند.

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

کد های html:

کد های css:

کدهای javascript:

ویدئو نمونه کد مودال :

دانلود فایل کدها:

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

همیشه موفق باشید

مصطفی کیانفرد

علاقه مند به وردپرس :) فعالیت زیادی در زمینه وردپرس داشتم. متخصص سئو و بهینه سازی سایت، php و امنیت، امیدوارم راهنمای خوبی برای شما عزیزان باشم.

    نوشته‌های مرتبط

    قوانین ارسال دیدگاه

    • دیدگاه های فینگلیش تایید نخواهند شد.
    • فقط دیدگاه های فارسی تایید خواهد شد.
    • از درج دیدگاه های تکراری پرهیز نمایید.
    دیدگاه‌ها

    *
    *