First, React-modal
Official definition: Accessible modal Dialog component for React.js
Understanding: An easy-to-use react modal frame assembly
Second, usage
Sometimes when we don't use some UI frames (bs3.0, antd), we need to encapsulate some modal boxes ourselves. Define various callback events yourself ... Wait a minute
Consider using a NPM modal box package
Installation
$ npm install react-modalimport ReactModal from ‘react-modal‘
Event
isOpen: Modal frame State control
onafteropen: Callback event after modal box is opened
onrequestclose: Callback event after modal box is closed
style: Modal box style, default to content
default app name
Contentlabel: Content label
Combined with react
Import react,{Purecomponent} from ' React ' import reactmodal from ' react-modal ' const Customstyles = {content: {W Idth: ' 300px ', Height: ' 300px ', Top: ' 50% ', left: ' 50% ', Transform: ' Translate ( -50%, -55%) '}, b TN: {margintop:30, background: ' Transparent ', padding: ' 10px 15px '}; Reactmodal.setappelement (' #root ') export default class Reactmodalcomp extends purecomponent{constructor (ARG) { Super (ARG) this.state = {Modalopenstate:false,} this.openmodal = this.openModal.bind (th IS) This.closemodal = This.closeModal.bind (This)} openmodal () {this.setstate ({Modalopenst Ate:true,})} closemodal () {this.setstate ({modalopenstate:false,})} Afte Ropenmodalev () {console.log (' ==========> Open ')} render () {const {modalopenstate} = this.state; Return (<div classname= "ReactmodaL "> <button onclick={this.openmodal} style={customstyles.btn}> open </button> < ; Reactmodal IsOpen = {modalopenstate} style={customstyles} content Label= "Example Modal" Onafteropen={this.afteropenmodalev} > <fo rm> <input/> <p>tab navigation</p> <p>stays</p> <p>inside</p> <p>the modal< ;/p> </form> <button onclick={this.closemodal}> Close </button> </ReactModal> </div>)}}
More demos
"Basic Modal"
"Combining Onrequestclose"
Modal of the use of style
"Shouldcloseonoverlayclick"
Daily quality NPM package modal box _react-modal