Popup Modal in React Js with free source code
In this post we are going to create a Popup Modal in React Js With Free Source code. In this post you will get three files
1. App.js
2. Modal_1.jsx
3. index.css
This Modal is Created By Aayush Pathak(@coding.ayush). So Lets Learn How to create a modal in React Js
Preview
App.js
import { useState } from 'react'; import './App.css'; import Modal_1 from './all-modals/Modal_1'; function App() { const [isModalopen, setIsModalopen] = useState(false) return ( <div className="App"> <div className='modal-trigger' onClick={() => { setIsModalopen(!isModalopen) }}>Open Modal</div> <Modal_1 isModalopen={isModalopen} setIsModalopen={setIsModalopen} /> </div> ); } export default App;
Modal_1.jsx
import React from "react"; const Modal_1 = ({ isModalopen, setIsModalopen }) => { return ( <> <div className={`modal ${isModalopen ? "modal-open" : "modal-close"}`}> <div className="modal-body"> <div className="modal-head">! Hello World This is Nice!</div> <div className="modal-footer"> <div className="modal-btn" onClick={() => { setIsModalopen(!isModalopen); }} > Close </div> </div> </div> </div> </> ); }; export default Modal_1;
index.css
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #11131e; display: flex; align-items: center; justify-content: center; min-height: 100vh; max-height: 100vh; } .modal { transition: all 0.3s ease; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .modal-body { height: max-content; padding: 30px; border-radius: 10px; background: #fff; width: max-content; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90%; } .modal-head { font-weight: 500; font-size: 18px; } .modal-footer { margin-top: 20px; } .modal-btn, .modal-trigger { margin: auto; background-color: #11131e; color: #fff; width: max-content; padding: 10px 20px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: all 0.1s ease; cursor: pointer; user-select: none; } .modal-trigger { background-color: #fff; color: #11131e; } .modal-btn:active, .modal-trigger:active { scale: 0.9; } .modal-open { scale: 1; opacity: 1; z-index: 1; } .modal-close { opacity: 0; scale: 0.8; z-index: -1; }
Nice helpful
ReplyDeleteGreat I am lovinn it !!
ReplyDelete