@rodger.botsford Используйте пример кода ниже как пример, чтобы сделать модальное окно в React.js. Понятное дело это простой пример создания модального окна, но как направление - можно использовать.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
import React, { useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const Modal = ({ header = "", text = "", closeModal }) => { return ( <div className="modal"> <div className="modal-header"> <h2>{header} </h2> <label className="btn-close" onClick={closeModal} aria-hidden="true"> × </label> </div> <div className="modal-body"> <p>{text}</p> </div> <div className="modal-footer"> <label className="btn btn-primary" onClick={closeModal}> Отлично! </label> </div> </div> ); }; const Main = () => { const [showModal, setShowModal] = useState(false); return ( <div> <button onClick={() => setShowModal(true)}> Показать модальное окно </button> {showModal ? ( <Modal header="Модальное окно" text="Текст" closeModal={() => setShowModal(false)} /> ) : null} </div> ); }; class App extends React.Component { render() { return <Main />; } } ReactDOM.render(<App />, document.getElementById("container")); |
Стили понятное дело каждому по вкусу 😁 но мой небольшой пример стилей ниже (styles.css):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
.modal-header h2 { color: #555; font-size: 20px; font-weight: normal; line-height: 1; margin: 0; } .modal .btn-close { color: #aaa; cursor: pointer; font-size: 30px; text-decoration: none; position: absolute; right: 5px; top: 0; } .modal { background: #fefefe; border: 1px solid black; border-radius: 5px; position: fixed; width: 400px; top: 50px; left: 50%; margin-left: -200px; z-index: 103; background-color: #f2f2f2; } .modal-body { padding: 20px; } .modal-body p { margin: 0; } .modal-header, .modal-footer { padding: 20px 20px; } .modal-header { border-bottom: #eaeaea solid 1px; } .modal-header h2 { font-size: 20px; margin: 0; } .modal-footer { border-top: #eaeaea solid 1px; text-align: right; } .btn { background: #fff; border: #555 solid 1px; border-radius: 3px; cursor: pointer; display: inline-block; font-size: 14px; padding: 8px 15px; text-decoration: none; text-align: center; min-width: 60px; position: relative; } .btn:hover, .btn:focus { background: #f2f2f2; } .btn-primary { background: #428bca; border-color: #357ebd; color: #fff; } .btn-primary:hover { background: #66a1d3; } |
@rodger.botsford
Для создания модального окна в React.js есть несколько подходов. Один из наиболее распространенных - это создание компонента, который будет являться модальным окном.
Этот компонент должен иметь состояние, которое отвечает за то, открыто ли модальное окно, а также методы, которые будут управлять состоянием. Это можно сделать с помощью хуков useState и useEffect.
Пример кода для создания модального окна в React.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import React, { useState, useEffect } from 'react'; import Modal from './Modal'; function App() { const [isModalOpen, setIsModalOpen] = useState(false); useEffect(() => { if (isModalOpen) { document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = 'auto'; } }, [isModalOpen]); return ( setIsModalOpen(true)}>Open Modal {isModalOpen && ( setIsModalOpen(false)}> Modal Title Modal Content )} ); } export default App; |
В этом примере, при нажатии на кнопку, вызывается метод setIsModalOpen, который меняет значение состояния isModalOpen на true, и отображается компонент Modal.
Компонент Modal принимает в качестве атрибутов onClose — функцию, которая закрывает модальное окно, и дочерние элементы, которые будут отображаться внутри модального окна.
Закрытие модального окна происходит при нажатии на кнопку, которая находится внутри компонента Modal и вызывает функцию onClose.
Также обратите внимание на useEffect — он устанавливает CSS-свойство overflow для элемента body, чтобы скрыть скролл браузера при отображении модального окна.