بعد از کلی کلنجار رفتن با خودم بالاخره تصمیم گرفتم کمال گرایی رو کنار بذارم و اولین مقاله خودم رو بنویسم. برای شروع یه مطلب مختصر و مفید آماده کردم که امیدوارم استارت مقالات بهتر و باکیفیت تر باشه:) .
در این مقاله یاد میگیریم چطور با css و javascript یک modal بسازیم. هدف این است که یک popup box ساده که از هیچ کتابخونه ای استفاده نشده، بسازیم.
از نمونه های محبوب popupها می تونیم به فرم ثبت نام و ورود به سیستم، نمایش اعلان ها و هشدارها اشاره کنیم.
از این modal میتونید به صورت عمومی و برای هر هدفی که خواستید استفاده کنید.
HTML markup
بریم با کدهای HTML شروع کنیم:
در اینجا، ۳تا کامپوننت مختلف داریم: button که وقتی روش کلیک میکنیم باعث باز شدن modal میشه. container والد رو داریم که modal رو داخل خودش نگه داشته. در نهایت، محتوایی رو داریم که داخل modal قرار میگیره و در نهایت دکمه ای که باعث بسته شدن آن میشود.
CSS styles
در ادامه با استفاده از css ظاهری زیبا و تمیز به modal می دهیم. هر قسمت رو هم جدا توضیح میدم که چه اتفاقی افتاده.
به مدال بک گراند تیره و بلر دادیم و زمانی که فعال میشه نمایش داده میشه. عرض و ارتفاع را ۱۰۰% گذاشتیم و visibility را برابر hidden قرار دادیم تا زمانی که کاربر روی دکمه کلیک نکرده نمایش داده نشه. همچنین استفاده از transition باعث میشه مدال با انیمیشن باز و بسته بشه.
سپس با استفاده از کلاس modal__content موقعیت مدال رو در وسط screen مشخص میکنیم.
حالا با استفاده از css استایل های مربوط به form و دکمه submit رو مینویسیم تا ظاهر زیباتری داشته باشه. (برای سادگی از المان های زیادی استفاده نکردیم)
برای اینکه امکان بستن modal رو داشته باشیم، از دکمه X استفاده میکنیم. این دکمه در سمت بالا و راست modal قرار میگیره. همچنین یک حالت hover: برای بستن دکمه داریم که با قرارگیری کاربر روی دکمه، رنگ آن تغییر می کند.
در نهایت کلاس show-modal رو داریم که مدال طراحی شده رو نمایش میده.
JavaScript code
برای اینکه واقعا باز شدن پنجره modal کار کنه، از مقدار کمی جاوااسکریپت خالص استفاده میکنیم.
ما در اینجا ۳تا event listener داریم:
• زمانی که روی trigger کلیک میکنیم ==> برای نمایش دادن مدال
• زمانی که روی close button کلیک میکنیم ==> برای بستن مدال
• زمانی که روی بک گراند تیره کلیک میکنیم ==> برای بستن مدال
حالا اگر روی دکمه ها کلیک شود، مدال به آرامی تغییر وضعیت میدهد.
حالا زمانی که روی دکمه trigger و close button کلیک کنید، مدال به آرامی با یک انیمیشن باز و بسته می شود.
شما می تونید از این مدال برای بخش ورود یا ثبت نام در پروژه های خودتون استفاده کنید. امیدوارم از نتیجه لذت ببرید و براتون مفید بوده باشه✨.
