React制作页面遮罩

需要安装的组件：react,react-dom,antd

具体代码如下：

遮罩：

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'antd'
import './style.css';

class Dialog extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show: true
        }
    }

    // 执行回调函数
    okFunc = () => {
        this.closeFunc();
        if (typeof this.props.callbackFunc === "function") {
            this.props.callbackFunc();
        }
    }

    // 关闭弹窗
    closeFunc = () => {
        this.setState({
            show: false
        })
    }

    render() {
        const { title, message, hasCancelBtn = false } = this.props
        return (
            this.state.show ?
                <div className="dialog">
                    <div className="dialog-content">
                        <div className="dialog-title">{title}</div>
                        <div className="dialog-body">{message}</div>
                        <div className="dialog-footer">
                            <Button type="primary" onClick={this.okFunc}>确定</Button>
                            {
                                hasCancelBtn ? <Button type="default" onClick={this.closeFunc}>取消</Button> : null
                            }
                        </div>
                    </div>
                </div> : null
        )
    }
}

const popUp = (title, message, hasCancelBtn, callbackFunc) => {
    let div = document.createElement('div');
    document.body.appendChild(div);
    return ReactDOM.render(
        <Dialog title={title} message={message} hasCancelBtn={hasCancelBtn} callbackFunc={callbackFunc} />, div
    )
}

export default popUp;

样式：

.dialog{
    width: 100%;
    height: 100%;
    z-index: 1000;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.45); /* 0.45 透明度 */
    filter:alpha(opacity=50);
    position:absolute;
}

.dialog-content{
    top: 30%;
    left: 35%;
    z-index: 1001;
    position: absolute;
    background-color: #ffffff;
    width: 550px;
    color: black;
    font-size: large;
    border-radius: 10px;
}

.dialog-title{
    height: 60px;
    line-height: 60px;
    text-align: left;
    padding-left: 35px;
    border-bottom: 1px solid gray;
    border-radius: 10px 10px 0 0;
    background-color: #c9dcd1;
}

.dialog-body{
    height: 120px;
    line-height: 120px;
    text-align: center;
    border-bottom: 1px solid gray;
}

.dialog-footer{
    height: 60px;
    line-height: 60px;
    padding-right: 35px;
    text-align: right;
    border-radius: 10px 10px 0 0;
}

button{
    margin-left: 20px;
}

测试页面：

import React from 'react';
import {Button} from "antd";
import popUp from "./Dialog";

class Test extends React.Component { 

    callbackFunc = () => {
        alert("回调函数执行了...")
    }

    box = () => {
        popUp("Confirme","消息提示！！！",true,this.callbackFunc)
    }
    render(){
        return(
            <div>
                <Button type="primary" onClick={this.box}>点击</Button>
            </div>
        )
    }
 }

 export default Test;

效果：点击确定后会执行回调函数