МОДАЛЬНІ ВІКНА В ІНТЕРФЕЙСІ КОРИСТУВАЧА ЗАСОБАМИ REACT/NEXT.JS

O. G. Trofymenko; S. Yu. Manakov; M. M. Korniichuk; Yu. V. Loboda; P. O. Chykunov

doi:10.32782/2521-6643-2025-1-69.11

O. G. Trofymenko National University "Odesa Law Academy" https://orcid.org/0000-0001-7626-0886
S. Yu. Manakov National University "Odesa Law Academy" https://orcid.org/0000-0001-5930-4592
M. M. Korniichuk National University "Odesa Law Academy" https://orcid.org/0009-0009-4223-9291
Yu. V. Loboda National University "Odesa Law Academy" https://orcid.org/0000-0001-7083-552X
P. O. Chykunov National University "Odesa Law Academy" https://orcid.org/0000-0003-4959-7744

DOI: https://doi.org/10.32782/2521-6643-2025-1-69.11

Keywords: modal window, web programming, web design, interface, testing, pop-up window

Abstract

Modal windows are a ubiquitous element of digital interfaces for displaying notifications, collecting user input, and controlling navigation. The purpose of the article is to analyze and systematize modern approaches to implementing modal windows in web applications created using React and Next.js. The article provides a comprehensive analysis of modern approaches to implementing modal windows in frontend development. First, the role of modal windows in improving user interaction in web applications is investigated. Despite their widespread use, there is some ambiguity regarding when to use modal windows and when alternative solutions are pop-up dialog boxes. The authors conduct a detailed comparison of these interface components, their different uses, advantages, and potential disadvantages. Secondly, the article discusses various problems in developing functional modal windows in the user interface. This concerns accessibility, performance, and efficiency issues, integration of modal windows with routing, mobile issues, interruption of ongoing interaction, issues with markup and styles. Systematizing approaches to implementing these components allows you to ensure interface quality and increase the scalability and maintainability of web applications in the long term. Third, the paper explores the issue of testing modal windows in dynamic web environments. Traditional automated testing tools often have problems with modal interactions due to their temporal nature and dependence on user-initiated events. The paper discusses how artificial intelligence (AI) can help address these challenges by enabling sophisticated analysis of modal behavior, including dynamic adaptation of content and responsiveness in real time. AI-based testing frameworks can simulate complex user interactions, detect accessibility issues, and predict potential UX issues before deployment. By integrating effective accessibility practices, optimizing performance, and using advanced AI-powered testing, developers can create intuitive and effective interfaces that enhance, rather than hinder, user interactions. The analysis can be valuable for both novice and experienced interface developers looking to refine their approach to modal design in modern web applications.

References

1. Ruiz J., Serral E., Snoeck M. Unifying Functional User Interface Design Principles. International Journal of Human-Computer Interaction. 2020. Vol. 37(4). P. 1-21. DOI: https://doi.org/10.1080/10447318.2020.1805876
2. Cui H., Trimananda R., Markopoulou A. Understanding Privacy Norms through Web Forms. arXiv. 2024. Vol. 2408.16304. DOI: https://doi.org/10.48550/arXiv.2408.16304.
3. Gellert U., Cristea A. Creating Modal Windows and External Windows. In: Web Dynpro ABAP for Practitioners. Springer, Berlin, Heidelberg. 2013. P. 361-379. DOI: https://doi.org/10.1007/978-3-642-38247-5_15
4. Knut H., Lars H., Vegard S., Frode S. Form Feedback on the Web: A Comparison of Popup Alerts and In-Form Error Messages. Smart Innovation, Systems and Technologies (SIST). 2019. Vol. 145. P. 369-379. DOI: https://doi.org/10.1007/978-981-13-8566-7_35
5. Zhan C. File Upload and Popup Dialogs. In: Selenium WebDriver Recipes in C#. Apress, Berkeley, CA. 2024. P. 107-116. DOI: https://doi.org/10.1007/979-8-8688-0023-8_13
6. Visconti E., Tsigkanos Ch., Nenzi L. Automated Monitoring of Web User Interfaces. ACM Transactions on the Web. 2025. Vol. 19, Issue 2. No. 10. P. 1-27. DOI: https://doi.org/10.1145/3708512.
7. Трофименко О.Г., Пастернак Ю.Ю., Манаков С.Ю., Лобода Ю.Г. Автоматизація тестування вебсайтів електронної комерції. Сучасна спеціальна техніка. 2021. № 2(65). С. 46-59. DOI: https://doi.org/10.36486/mst2411–3816.2021.2(65).5
8. Trofymenko O. H., Dyka A. I. Problems of testing e-commerce websites. International scientific conference «Information technologies and management in higher education and sciences» (November 28, 2022). Riga, Latvia: “Baltija Publishing”, 2022. Part 3. P. 195-199. DOI: https://doi.org/10.30525/978-9934-26-277-7-230
9. Boyev V. What is a modal in web design: all you need to know. 2024. URL: https://www.halo-lab.com/blog/modal-web-design
10. Peña N. S. Modals vs. Dialogs vs. Popups: How to Use Them Effectively in UX Design. 2025. URL: https://surl.li/wkumrj
11. The Dialog Element. Mdn web docs. URL: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
12. createPortal. React. URL: https://react.dev/reference/react-dom/createPortal
13. NextJS Docs. Routing. Parallel Routes. URL: https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#modals
14. useRef. React. URL: https://react.dev/reference/react/useRef
15. Трофименко О.Г., Дика А.І., Лобода Ю.Г. Аналіз інструментів тестування вебзастосунків. Кібербезпека: освіта, наука, техніка. 2023. № 4(20). С. 62-71. DOI: https://doi.org/10.28925/2663-4023.2023.20.6271

MODAL WINDOWS IN THE IN UI WITH REACT/NEXT.JS

Abstract

References