CODEWITHSUNDEEP
reactjs
hitesh
hitesh

Reputation: 499

open a pop up window in reactjs application

Hi I want to open a popup similar to what this website opens when someone click on the Register Link https://www.eventshigh.com/detail/Bangalore/625f39dbdb5b8e4fb5b78a073922f221-6th-save-the-queen-corporate?src=ecbox

I want pass properties to the child element which will open in popup and then capture the action taken in the child element to parent element.

Can someone tell me how best we can do this.

Upvotes: 3

Views: 13716

Answers (2)

illiteratewriter
illiteratewriter

Reputation: 4323

The popup is called a modal. There are multiple libraries that support modals. React bootstrap provides a neat modal. Or if you want to use modal alone there are libraries such as react-modal and react-responsive-modal

Upvotes: 3

mdegis
mdegis

Reputation: 2438

They called Modal.

You can check the react-modal library.

Here is a simple example of react-modal being used in an app with some custom styles and focusable input elements within the modal content:

import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';

const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)'
  }
};

// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
Modal.setAppElement('#yourAppElement')

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      modalIsOpen: false
    };

    this.openModal = this.openModal.bind(this);
    this.afterOpenModal = this.afterOpenModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  openModal() {
    this.setState({modalIsOpen: true});
  }

  afterOpenModal() {
    // references are now sync'd and can be accessed.
    this.subtitle.style.color = '#f00';
  }

  closeModal() {
    this.setState({modalIsOpen: false});
  }

  render() {
    return (
      <div>
        <button onClick={this.openModal}>Open Modal</button>
        <Modal
          isOpen={this.state.modalIsOpen}
          onAfterOpen={this.afterOpenModal}
          onRequestClose={this.closeModal}
          style={customStyles}
          contentLabel="Example Modal"
        >

          <h2 ref={subtitle => this.subtitle = subtitle}>Hello</h2>
          <button onClick={this.closeModal}>close</button>
          <div>I am a modal</div>
          <form>
            <input />
            <button>tab navigation</button>
            <button>stays</button>
            <button>inside</button>
            <button>the modal</button>
          </form>
        </Modal>
      </div>
    );
  }
}

ReactDOM.render(<App />, appElement);

You can see more examples here

Upvotes: 6

Related Questions