Want to open custom popup in react JavaScript using HTML5

Question

I tried this link:

http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

But its not working in:

I tried this code in jsx file

<a href="#openModal">Open Modal</a>

<div id="openModal" className="modalDialog">
    <div>
        <a href="#close" title="Close" className="close">X</a>
        <h2>Modal Box</h2>
        <p>This is a sample modal box that can be created using the powers of CSS3.</p>
        <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
    </div>
</div>

Also this code:

ondialog() 
{
    <dialog id="window">
        <h3>Sample Dialog!</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, inventore!</p>
        <button id="exit">Close Dialog</button>
    </dialog>
}

on button click still no use

Preview · Accepted Answer · 2017-11-15 18:44:15Z

There is actually no code here that open a modal, but you could do something like this using the ES6 class syntax and class properties (you might need to have the right babel configs for this)

import React, { Component } from 'react'

class Page extends Component {

  constructor (props) {
    super(props)
    this.state = { modalActive: false }
  }

  openModal = () => {
    this.setState({ modalActive: true })
  }

  closeModal = () => {
    this.setState({ modalActive: false })
  }

  render () {
    return (
      <div>
        <button onClick={this.openModal}>Open modal</button>

        {this.state.modalActive && (
          <div className='modalDialog'>
            <a title='Close' onClick={this.closeModal}>X</a>
            <h2>Modal</h2>
            <p>This is a sample modal</p>
          </div>
        )}
      </div>
    )
  }
}

What I'm basically doing is keeping a boolean in my state to define if the modal is shown or not and my condition on this.state.modalActive will render the modal if the value is trulthy.

Nacho Coloma · Accepted Answer · 2017-07-22 22:20:30Z

0

Adding an open attribute to your dialog will make it visible:

render () {
  return (
  <div>
    {this.state.modalActive && (
      <dialog className='modalDialog' open>
      </dialog>
    )}
  </div>
)

}

answered Jul 22, 2017 at 22:20

Nacho Coloma

7,3763 gold badges44 silver badges44 bronze badges

Collectives™ on Stack Overflow

Want to open custom popup in react JavaScript using HTML5

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related