Для достижения желаемого результата вам необходимо использовать React и некоторые библиотеки. Я расскажу вам о двух возможных подходах к решению этой задачи.
1. Используя React Hooks:
Первым шагом следует установить несколько зависимостей при помощи npm или yarn. Выполните команду в вашем терминале:
npm install react react-dom react-modal
После установки зависимостей вы можете начать реализацию. Создайте новый компонент и импортируйте библиотеку react-modal
. Подключите стили этой библиотеки к вашему проекту.
import React, { useState } from 'react'; import Modal from 'react-modal'; // Обязательно вызовите эту функцию перед использованием модального окна Modal.setAppElement('#root'); function App() { const [isModalOpen, setIsModalOpen] = useState(false); const handleInputClick = () => { setIsModalOpen(true); }; const closeModal = () => { setIsModalOpen(false); }; return ( <div> <input type="text" onClick={handleInputClick} /> <Modal isOpen={isModalOpen} onRequestClose={closeModal}> <h2>Модальное окно</h2> <button onClick={closeModal}>Закрыть</button> </Modal> </div> ); } export default App;
В данном примере мы создали компонент App
, который содержит текстовый инпут. При клике на этот инпут модальное окно становится видимым. Обратите внимание на вызов функции setAppElement
, который сообщает библиотеке, где находится ваш корневой элемент.
2. Используя стороннюю библиотеку React Modal Library:
Вашим следующим шагом будет установка библиотеки React Modal Library. Выполните команду в вашем терминале:
npm install react-modal
После установки вы можете импортировать компонент Modal
из этой библиотеки и использовать его в вашем проекте.
import React, { useState } from 'react'; import Modal from 'react-modal'; function App() { const [isModalOpen, setIsModalOpen] = useState(false); const handleInputClick = () => { setIsModalOpen(true); }; const closeModal = () => { setIsModalOpen(false); }; return ( <div> <input type="text" onClick={handleInputClick} /> <Modal isOpen={isModalOpen} onRequestClose={closeModal} contentLabel="Modal" > <h2>Модальное окно</h2> <button onClick={closeModal}>Закрыть</button> </Modal> </div> ); } export default App;
В этом примере мы также создали компонент App
, который содержит текстовый инпут. При клике на этот инпут модальное окно становится видимым. Здесь мы используем атрибут contentLabel
, который описывает содержимое модального окна для доступности.
Оба подхода позволяют достичь вашей цели, но используют разные библиотеки. Выбор зависит от ваших предпочтений и требований проекта.