screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> const { useState, useRef, useEffect } = React; function App() { const [showPopup, setShowPopup] = useState(false); const modalRef = useRef(null); useEffect(() => { if (showPopup) { document.addEventListener('mouseup', closeModalOnClickOutside); } return () => { document.removeEventListener('mouseup', closeModalOnClickOutside); }; }, [showPopup]); const saveModal = () => { alert('Successfully Save data'); closePopup(); }; const openPopup = () => { setShowPopup(true); }; const closePopup = () => { setShowPopup(false); }; const closeModalOnClickOutside = (event) => { if (!modalRef.current.contains(event.target)) { closePopup(); } }; return ( <div className='container'> <h3>React Js Popup Modal Example</h3> <button className="popup-button" onClick={openPopup}>Open Popup</button> {showPopup && ( <div className="modal"> <div className="modal-content" ref={modalRef}> <button className="close-x" onClick={closePopup}> X</button> <div className="modal-header"> <h1>React Js Popup Modal Example</h1> </div> <div className="modal-body"> <p>Hello, from font awesome icons </p> </div> <div className="modal-footer"> <button className="close-button" onClick={closePopup}>Close</button> <button className="save-button" onClick={saveModal}>Save</button> </div> </div> </div> )} </div> ); } ReactDOM.render(<App />, document.getElementById('app')); </script> <style> .container { text-align: center; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24); width: 600px; margin: 0 auto; padding: 20px; } .popup-button { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 4px; cursor: pointer; } .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; } .modal-content { background-color: white; padding: 20px; border-radius: 5px; max-width: 500px; width: 80%; position: relative; } .close-x { position: absolute; top: 10px; right: 10px; padding: 5px; background-color: transparent; border: none; cursor: pointer; font-size: 18px; color: #555; } .close-x:hover { color: #ff0000; /* Change to your desired hover color */ } .modal-header { padding-bottom: 10px; border-bottom: 1px solid #ccc; } .modal-body { padding: 10px 0; } .modal-footer { padding-top: 10px; border-top: 1px solid #ccc; display: flex; justify-content: flex-end; } .close-button, .save-button { padding: 10px 20px; border: none; cursor: pointer; font-weight: bold; border-radius: 4px; transition: background-color 0.3s ease; } .close-button { background-color: #f44336; color: white; } .save-button { background-color: #4CAF50; color: white; margin-left: 10px; } .close-button:hover { background-color: #d32f2f; } .save-button:hover { background-color: #45a049; } </style> </body> </html>