Modal یک عنصر مشترک UX است. modal یک پنجره گفتگوی / پنجره بازشو است که در بالای صفحه فعلی نمایش داده می شود. حتماً از پاپ آپ و اعلان ها برای وب سایت خود استفاده کرده اید. برای برخی از افراد پنجره های بازشو واقعاً آزار دهنده هستند ? اگر اینگونه رفتار نکنند. باید UI / UX خوبی داشته باشد.
در این مقاله ، ما قصد داریم یک کارآمد ایجاد کنیم جز Mod معین? از ابتدا و بدون استفاده از کتابخانه.
Demo Link?: https://react-reusable-components.vercel.app/
هدف اصلی ما ایجاد یک روش کارآمد است که ،
- چیدمان خوبی دارد
- هنگام استفاده از سرریز در م parentلفه اصلی ، رابط کاربر شکسته نمی شود
- می تواند محتوا را به صورت پویا ارائه دهد
- انیمیشن تمیز و زیبا
- خوب به نظر می رسد (رابط کاربری خوب)
- کنترل بیشتری برای کاربر داشته باشید (مانند کلیک کردن روی قسمت بیرونی می توانید حالت بسته شود) و غیره
بیا شروع کنیم!
اگر قالب ویدیو را ترجیح می دهید ، می توانید این فیلم را تماشا کنید
https://www.youtube.com/watch؟v=5aG8peJsBVg
با استفاده از برنامه واکنش خود را ایجاد کنید ،
npx create-react-app react-modal
برای این آموزش ، من قصد دارم از آن استفاده کنم ساس بنابراین مطمئن شوید که بسته node-sass را نصب کرده اید. برای نصب آن ،
بیایید یک م Basicلفه Basic Modal ایجاد کنیم
پرونده App.js را باز کنید.
پاک کردن کد غیرضروری
اکنون یک دکمه در …