react-modal
It is a react modal. can drag and drop. Use react, es6, webpack, gulp. and It support multiple modal.But you will manual to set the zIndex.
======= Install.
- npm install gulp -g.
- npm install.
- gulp and then open localhost:8000/
example:
import React from 'react'
import { render } from 'react-dom'
import Modal from './modal'
class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
isOpen:false,
isOpen2:false
}
this.style = {
modal:{
zIndex:200,
left:'40%',
top:'40%',
height:'40%',
width:'30%'
}
}
}
_openModal() {
this.setState({isOpen:true});
}
_openModal2() {
this.setState({isOpen2:true});
}
_onDismiss() {
this.setState({isOpen:false});
}
_onDismiss2() {
this.setState({isOpen2:false});
}
render(){
const title = <div style={{'float': 'left'}}>Modal Page</div>
return(
<div>
<div>
<button onClick={this._openModal.bind(this)} className='button float-left'>Open Modal</button>
<Modal title={title} isOpen={this.state.isOpen}>
<div style={{margin:'20px', height:'200px'}}>
Modal1
</div>
<div><button style={{height:'30px',width:'60px',background:'#ddd'}} onClick={this._onDismiss.bind(this)}>Close</button></div>
<button onClick={this._openModal2.bind(this)} style={{height:'30px',width:'100px',background:'#ddd',margin:'10px'}} >Open Modal2</button>
</Modal>
<Modal style={this.style} title={title} isOpen={this.state.isOpen2}> {/*you can set the modal style youself*/}
<div style={{margin:'20px', height:'200px'}}>
Modal2
</div>
<div><button style={{height:'30px',width:'60px',background:'#ddd'}} onClick={this._onDismiss2.bind(this)}>Close</button></div>
</Modal>
</div>
</div>
)
}
}
render(
<Main />,
document.getElementById('modal')
)