需要安装的组件: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;
效果:点击确定后会执行回调函数