Want to open custom popup in react JavaScript using HTML5 -

i tried link:

http://codepen.io/anon/pen/zxldgz

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

but not working in:

i tried 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 sample modal box can created using powers of css3.</p>         <p>you lot of things here have pop-up ad shows when website loads, or create login/register form users.</p>     </div> </div> 

also 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

there no code here open modal, using es6 class syntax

import react, { component } '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 sample modal</p>           </div>         )}       </div>     )   } } 

what i'm doing keeping boolean in state define if modal shown or not , condition on this.state.modalactive render modal if value trulthy.