Show a pop-up form when a user focuses on it using React

Question

Show a pop-up form when a user focuses on it using React

Hello, I have been looking for a way to create an overlay with a form that appears when a specific input field is clicked. I am trying to achieve this using React. Can someone please advise me on how to accomplish this?

Here is my code

import React, { Component } from 'react';


class Middle extends Component {

    constructor(props) {
        super(props);
        this.state = {
            posts: []
        }
    }

    render() {

        function displayOverlay(e) {
            e.preventDefault();
            alert("Now the overlay should appear");
        }

        return (
            <div className="middle_div">

                <input className='post_data_input' placeholder="Ask your question here" ref="postTxt"
                       onClick={displayOverlay}/>

            </div>


        );
    }
}

export default Middle;

I have created a function that triggers an alert when the input field is clicked. Instead of the alert, I would like to show a transparent overlay with a form.

I am aiming for something similar to this example:

http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay

Thank you in advance.

html css reactjs

Answer 1

Answer №1

Here's the code snippet to dynamically change the className of the side bar. By calling toggleSideBar, the className will switch between hideSideBar and showSideBar. Make sure to write the CSS for these classes as shown in the code school link. Hopefully, it should work smoothly.

import React, { Component } from 'react';


class Middle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sidebar: 'hideSideBar',
      posts: [],
    }
  }

  toggleSideBar() {
    if(this.state.toggleBar === 'showSideBar') {
      this.setState({ toggleBar: 'hideSideBar' });
    } else {
      this.setState({ toggleBar: 'showSideBar' });        
    }
  }

  render() {
    return (
      <div className="middle_div">
        <input
          className='post_data_input'
          placeholder="Ask your question here"
          ref="postTxt"
          onClick={this.toggleSideBar.bind(this)}
        />

        <div className={this.state.sidebar} />
          // This will be the sidebar
        </div>
      </div>
    );
  }
}

export default Middle;

Answer 2

Here's the code snippet to dynamically change the className of the side bar. By calling toggleSideBar, the className will switch between hideSideBar and showSideBar. Make sure to write the CSS for these classes as shown in the code school link. Hopefully, it should work smoothly.

import React, { Component } from 'react';


class Middle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sidebar: 'hideSideBar',
      posts: [],
    }
  }

  toggleSideBar() {
    if(this.state.toggleBar === 'showSideBar') {
      this.setState({ toggleBar: 'hideSideBar' });
    } else {
      this.setState({ toggleBar: 'showSideBar' });        
    }
  }

  render() {
    return (
      <div className="middle_div">
        <input
          className='post_data_input'
          placeholder="Ask your question here"
          ref="postTxt"
          onClick={this.toggleSideBar.bind(this)}
        />

        <div className={this.state.sidebar} />
          // This will be the sidebar
        </div>
      </div>
    );
  }
}

export default Middle;

Answer 3

Answer №2

I have customized a React component based on the link provided in your question. I believe this can assist you in achieving some of your desired functionality.

class Test extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            style : {
                width : 350
            }
        };
        this.openNav = this.openNav.bind(this);
        this.closeNav = this.closeNav.bind(this);
    }

    componentDidMount() {
        document.addEventListener("click", this.closeNav);
    }

    componentWillUnmount() {
        document.removeEventListener("click", this.closeNav);
    }

    openNav() {
        const style = { width : 350 };
        this.setState({ style });
        document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
        document.addEventListener("click", this.closeNav);
    }

    closeNav() {
        document.removeEventListener("click", this.closeNav);
        const style = { width : 0 };
        this.setState({ style });
        document.body.style.backgroundColor = "#F3F3F3";
    }

    render() {
        return (
          <div>
          <h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:</p>
<span style={{fontSize:30,cursor:"pointer"}} onClick={this.openNav}>&#9776; open</span>
            <div
                ref       = "snav"
                className = "overlay"
                style     = {this.state.style}
            >
                <div className = "sidenav-container">
                    <div className = "text-center">
                      <h2>Form</h2>
                      <p>This is a sample input form</p>
                    </div>
                    <a
                        href      = "javascript:void(0)"
                        className = "closebtn"
                        onClick   = {this.closeNav}
                    >
                        ×
                    </a>
                  <div className = "list-group">
                      {/*your form component goes here */}
                      {this.props.children}
                  </div>
                </div>
            </div>
          </div>
        );
    }
}

ReactDOM.render(
  <Test/>,
  document.getElementById('test')
);

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

.overlay h2, .overlay p {
  color:white;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="test"></div>

Answer 4

I have customized a React component based on the link provided in your question. I believe this can assist you in achieving some of your desired functionality.

class Test extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            style : {
                width : 350
            }
        };
        this.openNav = this.openNav.bind(this);
        this.closeNav = this.closeNav.bind(this);
    }

    componentDidMount() {
        document.addEventListener("click", this.closeNav);
    }

    componentWillUnmount() {
        document.removeEventListener("click", this.closeNav);
    }

    openNav() {
        const style = { width : 350 };
        this.setState({ style });
        document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
        document.addEventListener("click", this.closeNav);
    }

    closeNav() {
        document.removeEventListener("click", this.closeNav);
        const style = { width : 0 };
        this.setState({ style });
        document.body.style.backgroundColor = "#F3F3F3";
    }

    render() {
        return (
          <div>
          <h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:</p>
<span style={{fontSize:30,cursor:"pointer"}} onClick={this.openNav}>&#9776; open</span>
            <div
                ref       = "snav"
                className = "overlay"
                style     = {this.state.style}
            >
                <div className = "sidenav-container">
                    <div className = "text-center">
                      <h2>Form</h2>
                      <p>This is a sample input form</p>
                    </div>
                    <a
                        href      = "javascript:void(0)"
                        className = "closebtn"
                        onClick   = {this.closeNav}
                    >
                        ×
                    </a>
                  <div className = "list-group">
                      {/*your form component goes here */}
                      {this.props.children}
                  </div>
                </div>
            </div>
          </div>
        );
    }
}

ReactDOM.render(
  <Test/>,
  document.getElementById('test')
);

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

.overlay h2, .overlay p {
  color:white;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="test"></div>

Show a pop-up form when a user focuses on it using React

Answer №1

Answer №2

Similar questions

What is the best way to retrieve the values of "qty" and "price" and access them within the item [array] without knowing the IDs?

Techniques for dynamically displaying or hiding elements depending on various input groups using jQuery?

When the open button is clicked, the Div will toggle between open and closed states

The CSS overlay effect refuses to shut down

Transmitting video through a local area network

The element's position remains unchanged after the .click re-event in the function

Utilizing React.js with Material-UI to retrieve data from a table row when clicked

Add a touch of shadow to a stationary top banner as you scroll through the page

Center Align Images in HTML List Items

Storing data locally in PhoneGap using localStorage via AJAX calls is a common requirement for

Resetting a password using email feature in React

Timepicker Bootstrapping

Looking for a way to verify and match passwords in React Hook Form? Wondering if there's a built-in validation feature to display error messages with React Hook Form?

A step-by-step guide on retrieving a value from a DateTime picker in a React application

Is it possible to utilize React.lazy within a function?

Flex box causing Bootstrap5 responsive table to overflow

How can you retrieve the id of a div element using an if/else statement in React Js?

Tips for showcasing five inputs in a single row on a webpage using a customized width in Bootstrap

Changing the constant value

Tips for utilizing a prop to generate a unique image URL