javascript - How to add a simple popup in REACT? - Stack Overflow

admin管理员组

文章数量:1305234

I am building an app using React. I am new to it. So here I want to make a popup that will pop when a button is clicked. It is basically a login/signup system. How do I add the popup? Should I install a package?

This is the code :

import React, { Component } from "react";
import "./login.css";

class Screen extends Component {
  state = {
    name: "",
    password: "",
  };
  function1 = (event) => {
    this.setState({ name: event.target.value });
  };

  function2 = (event) => {
    this.setState({ password: event.target.value });
  };
  render() {
    return (
      <div>
        <div>
          <ul>
            <li>
              <p id="logo">My website </p>
            </li>
            <li>
              <a class="active">Home</a>
            </li>
            <li>
              <a onClick={this.function1}>Page 1</a>
            </li>
            <li>
              <a>Page 2</a>
            </li>
            <li>
              <a>Page 3</a>
            </li>
            <li>
              <a id="loggedinas">Logged in as: {this.state.name}</a>
            </li>
          </ul>
        </div>
        <h1>This is the title</h1>

        <h2>Login/Sign Up</h2>
        <input type="email" onChange={this.function1} maxLength="20"></input>
        <br />
        <br />
        <input type="password" onChange={this.function2}></input>
        <h1> logged in as: {this.state.name}</h1>
      </div>
    );
  }
}

export default Screen;

Css :

button {
  background-color: aqua;
}

body {
  background-color: white;
}

/* Navbar */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

#logo {
  color: white;
  padding-left: 10px;
  font-weight: bold;
}

#loggedinas {
  color: white;
  font-style: italic;
  font-weight: bold;
}

/* Navbar end */

Is there a simple way to do that?

I hope it is clear, Thank you in advance.

I am building an app using React. I am new to it. So here I want to make a popup that will pop when a button is clicked. It is basically a login/signup system. How do I add the popup? Should I install a package?

This is the code :

import React, { Component } from "react";
import "./login.css";

class Screen extends Component {
  state = {
    name: "",
    password: "",
  };
  function1 = (event) => {
    this.setState({ name: event.target.value });
  };

  function2 = (event) => {
    this.setState({ password: event.target.value });
  };
  render() {
    return (
      <div>
        <div>
          <ul>
            <li>
              <p id="logo">My website </p>
            </li>
            <li>
              <a class="active">Home</a>
            </li>
            <li>
              <a onClick={this.function1}>Page 1</a>
            </li>
            <li>
              <a>Page 2</a>
            </li>
            <li>
              <a>Page 3</a>
            </li>
            <li>
              <a id="loggedinas">Logged in as: {this.state.name}</a>
            </li>
          </ul>
        </div>
        <h1>This is the title</h1>

        <h2>Login/Sign Up</h2>
        <input type="email" onChange={this.function1} maxLength="20"></input>
        <br />
        <br />
        <input type="password" onChange={this.function2}></input>
        <h1> logged in as: {this.state.name}</h1>
      </div>
    );
  }
}

export default Screen;

Css :

button {
  background-color: aqua;
}

body {
  background-color: white;
}

/* Navbar */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

#logo {
  color: white;
  padding-left: 10px;
  font-weight: bold;
}

#loggedinas {
  color: white;
  font-style: italic;
  font-weight: bold;
}

/* Navbar end */

Is there a simple way to do that?

I hope it is clear, Thank you in advance.

• javascript
• html
• css
• reactjs
• popup

Share Improve this question Follow asked Apr 13, 2022 at 12:50 PythonPython 60911 gold badge77 silver badges1515 bronze badges 6

• You should be more specific. "How to show a popup with react" is a too-broad question, IMO. Also, there are many tutorials on this topic on the Internet. – Serhii Holinei Commented Apr 13, 2022 at 12:53
• you need popup or modal popup? – yanir midler Commented Apr 13, 2022 at 12:53
• What is a popup and a modal popup? Sorry, I'm new to React – Python Commented Apr 13, 2022 at 12:53
• Generally popups are tooltips that appear when elements are hovered over/clicked on. Modals are overlays, maybe a new form to be filled, for example. If it's a modal you want look at how to write a modal using a React portal. – Andy Commented Apr 13, 2022 at 12:56
• @Andy can you please put it into code and explain to me what it is? – Python Commented Apr 13, 2022 at 13:00

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 3

For class ponent

In app.js

import React from "react";
import Modal from "./Component/Modal";
import "./styles.css";
class App extends React.Component {
  state = {
    show: false
  };
  showModal = e => {
    this.setState({
      show: !this.state.show
    });
  };
  render() {
    return (
      <div className="App">
        <button
          class="toggle-button"
          id="centered-toggle-button"
          onClick={e => {
            this.showModal(e);
          }}
        >
          {" "}
          show Modal{" "}
        </button>

        <Modal onClose={this.showModal} show={this.state.show}>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis
          deserunt corrupti, ut fugit magni qui quasi nisi amet repellendus non
         
        </Modal>
      </div>
    );
  }
}

export default App;

In ponent/modal

Make file named index.js

import React from "react";
import "./modal.css";
import PropTypes from "prop-types";

export default class Modal extends React.Component {
  onClose = e => {
    this.props.onClose && this.props.onClose(e);
  };
  render() {
    if (!this.props.show) {
      return null;
    }
    return (
      <div class="modal" id="modal">
        <h2>Modal Window</h2>
        <div class="content">{this.props.children}</div>
        <div class="actions">
          <button class="toggle-button" onClick={this.onClose}>
            close
          </button>
        </div>
      </div>
    );
  }
}
Modal.propTypes = {
  onClose: PropTypes.func.isRequired,
  show: PropTypes.bool.isRequired
};

Make file modal.css

html,
body {
  height: 100%;
}
body {
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal {
  width: 500px;
  background: white;
  border: 1px solid #ccc;
  transition: 1.1s ease-out;
  box-shadow: -2rem 2rem 2rem rgba(0, 0, 0, 0.2);
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}
.modal.off {
  opacity: 0;
  visibility: hidden;
  filter: blur(8px);
  transform: scale(0.33);
  box-shadow: 1rem 0 0 rgba(0, 0, 0, 0.2);
}
@supports (offset-rotation: 0deg) {
  offset-rotation: 0deg;
  offset-path: path("M 250,100 S -300,500 -700,-200");
  .modal.off {
    offset-distance: 100%;
  }
}
@media (prefers-reduced-motion) {
  .modal {
    offset-path: none;
  }
}
.modal h2 {
  border-bottom: 1px solid #ccc;
  padding: 1rem;
  margin: 0;
}
.modal .content {
  padding: 1rem;
}
.modal .actions {
  border-top: 1px solid #ccc;
  background: #eee;
  padding: 0.5rem 1rem;
}
.modal .actions button {
  border: 0;
  background: #78f89f;
  border-radius: 5px;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  line-height: 1;
}
#centered-toggle-button {
  position: absolute;
}

This is an example of modal with class ponent. Please check if this helps you.

@Python

Second example

You can try this, if that does not work. This is bit easy also.

Using react bootstrap module. In App.js

import React from 'react';  
import './App.css';  
import { Button,Modal} from 'react-bootstrap';  
class App extends React.Component {  
  constructor(){  
    super();  
    this.state={  
      show:false  
    }  
  }  
  handleModal(){  
    this.setState({show:!this.state.show})  
  }  
  render(){  
    return (  
      <div>  
        <h2 align='center'>Example of Modal in Reactjs</h2>  
        <div className="modalClass">  
          <Button onClick={()=>this.handleModal()}>Click To Open Modal</Button>  
        </div>  
          
        <Modal show={this.state.show} onHide={()=>this.handleModal()}>  
          <Modal.Header closeButton>This is a Modal Heading</Modal.Header>  
          <Modal.Body>This is a Modal Body</Modal.Body>  
          <Modal.Footer>  
            <Button onClick={()=>this.handleModal()}>Close</Button>  
            <Button onClick={()=>this.handleModal()}>Save</Button>  
          </Modal.Footer>  
        </Modal>  
      </div>  
    )  
  }  
}  
export default App; 

In css file just add

.modalClass {  
  text-align: center;  
  margin-top: 100px;  
} 

The first step is to import packages.

import React from "react";
import { Modal, Button, Form } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.css";

Then in App function you can set state to show and hide the modal popup.

function App() {
  const [show, setShow] = useState(false);

  const handleShow = () => setShow(true);

  return (
    <>
      <div
        className="d-flex align-items-center justify-content-center"
        style={{ height: "100vh" }}
      >
        <Button variant="primary" onClick={handleShow}>
          Launch Form modal
        </Button>
      </div>
      <Modal show={show}>
        <Modal.Header closeButton>
          <Modal.Title>Login Form</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <></>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary">Close Modal</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

This is just an example, hope this helps you.

本文标签： javascriptHow to add a simple popup in REACTStack Overflow