صفحه اصلی / css / اموزش ساخت modal box (جعبه مودال) با js و css

اموزش ساخت modal box (جعبه مودال) با js و css

اموزش ساخت modal box (جعبه مودال) با js و css

 

با سلام خدمت شما بازدیدکنندگان گرامی مجله اینترنتی شماسافت در این پست از مبحث برنامه نویسی – js/css قصد اموزش ساخت modal box (جعبه مودال) با js و css داریم. در این اموزش شما یاد می گیرید که چگونه به راحتی و چند خط کد css و javascript یک جعبه مودال «modal box» برای سایت خود طراحی کنید.

شروع ساخت modal box (جعبه مودال) با js و css

برای شروع این کار کافیست یک فایل html  را ایجاد کنید و سپس کد زیر را در ان بارگذاری کنید.

در کد بالا یک div به عنوان div اصلی با ای دی mymodal تعریف کرده ایم تا تمامی اجزای مودال را درون ان قرار دهیم سپس در یک دایو دیگر کهکلاس modal-content دارد اجزای مودال که شامل یک متن و یک دکمه برای بستن مودال هست  قرار میدهیم.

حال نوبت ان است که استایل مورد نیاز برای اجرای بهتر مودال را قرار دهیم برای این کار کافیست استایل های زیر را در تگ استایل در هدر فایل html خود قرار دهید.

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

اکنون که کد های css را نیز اضافه کردیم تنها قسمت باقی مانده مربوط به کد های جاوا اسکریپت می باشد. به صورت کلی تنها وظیفه این کد ها این است که در صورت کلیک کردن برروی دکمه دایو را نشان دهد و درصورت کلیک برروی دکمه (close)  دایو بسته شود.

 

این بود از کدهای مربوط به اموزش ساخت modal box (جعبه مودال) با js و css که به راحتی و بدون نیاز به هیچ کتابخانه ای (همچون bootstrap) می توانید مودال خود را طراحی کنید.

 

پیش نمایش کامل این قسمت در پایین می توانید ببنید.

 

See the Pen simple modal box by s,mohamamd hosein abedy (@shomasoft) on CodePen.

 

 

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *