Show a Div as a Modal Pop Up

Show a div as a modal pop up

you can use jquery dialog widget

http://jqueryui.com/demos/dialog/

Display a Modal Popup window

Try this to show the modal

$('#myModalPopup').modal('show');

React : How to display a modal popup only for that specific div

Of course, all modal will pop up at the same time. All modal using exactly same state which is this.state.showModal. Once it gets true then all will just pop up. If you still like to have 3 modals like that. I suggest you to make the value of showModal state with JSON value. Maybe something like this:

state = {
    showModal: {}
}

then for getModal() function:

getModal = value => {//still using variable from `data.id`
    let key_to_update = {};
    key_to_update[value] = true;
    this.setState( {
        showModal: Object.assign( {}, this.state.showModal, key_to_update )
    } );
}

Then for the <Modal/> should looks like this:

<Modal show={this.state.showModal[data.id]} onClick={()=> this.hideModal(data.id)}/>

To hide the modal you can do opposite of getModal() as follow:

hideModal = value => {//still using variable from `data.id`
    let key_to_update = {};
    key_to_update[value] = false;//Just different on this
    this.setState( {
        showModal: Object.assign( {}, this.state.showModal, key_to_update )
    } );
}

If you still interested and have a problem to implement it, I can help you create a working demo. Because I am not really test the code, just make it based on my experience and quick analysis. However, personally, I like to have a single Modal for this kind of case. Just set a single "state" of "Product detail" then read that "state" from single Modal then show it at the same time.

==== DEMO: MULTIPLE MODAL ELEMENT TECHNIQUE =====

Just like your comment, because you only need to show single modal at a time, then it will be much easier. We don't need to have multiple true/false condition like above. We can just use data.id as the true/false check to the showModal state like follow:

class Product extends Component {
  state = {
    showModal: 0
  };

  getModal = value => {
    this.setState({ showModal: value });
  };

  hideModal = value => {
    this.setState({ showModal: 0 });
  };

  render() {
    return (
      <div className="container">
        {this.props.data.map((data, key) => (
          <div key={key} className="small">
            <p>Namsse: {data.name}</p>

            <button onClick={() => this.getModal(data.id)}>Popup</button>

            <Modal
              show={this.state.showModal === data.id}
              onHide={() => this.hideModal(data.id)}
              name={data.name}
            />
          </div>
        ))}
      </div>
    );
  }
}

Working Demo: https://codesandbox.io/s/pkjvy72mw0

===DEMO: SINGLE MODAL ELEMENT TECHNIQUE===

You can also have only single <Modal/> element just like below:

class Product extends Component {
  state = {
    showModal: false,
    dataModal: {
      name: ""
    }
  };

  getModal = data => {
    this.setState({ showModal: true, dataModal: data });
  };

  hideModal = () => {
    this.setState({ showModal: false });
  };

  render() {
    return (
      <div className="container">
        {this.props.data.map((data, key) => (
          <div key={key} className="small">
            <p>Namsse: {data.name}</p>

            <button onClick={() => this.getModal(data)}>Popup</button>
          </div>
        ))}

        <Modal
          show={this.state.showModal}
          onHide={this.hideModal}
          name={this.state.dataModal.name}
        />
      </div>
    );
  }
}

Working demo: https://codesandbox.io/s/53x7m726xk

---

Related Topics