前提：
- 需要检测用户是否选中，如果未选中，用户可以点击下一步和取消
- 和组件库弹窗内容不同，需要自己封装
- 弹窗触发时间不同 可以刚进入就弹出弹窗，或者点击button之后
思考：弹窗封装成组件然后使用变量来控制显隐，每次都需要写弹窗的显示隐藏属性，比较麻烦。
采用：就像组件库中的message的方法一样，写成一个方法。利用jsx编写虚拟dom，使用ReactDom.render渲染到真实dom中。
封装的方法有两个参数，一个是弹出框展示的内容content，一个是选择的选项handler方法（无论是下一步还是取消都会传入一个执行方法，就是点击选项之后的操作）。
首先，定义一个pop节点，就是添加的弹窗。pop有两个子元素 一个是显示内容，还有一个div中是两个button，点击两个button会执行传入的下一步操作。
let pop = <div className="cover">
<div>{content}</div>
<div>
<button onClick={() => {
document.body.removeChild(div1);
console.log("不同意")
handler.cancel && handler.cancel()
}}>不同意</button>
<button onClick={() => {
document.body.removeChild(div1);
console.log("签署")
handler.confirm && handler.confirm()
}}>签署</button>
</div>
</div>
踩坑： 不能直接放入ReactDOM.render（pop, documnet.body） 直接加入body中，浏览器提示与页面上的其他脚本或者浏览器程序产生冲突，导致点击出现弹窗的button消失。
所以采用了创建了一个特定的容器div，将pop渲染到容器元素中，移除的时候直接移除body中的div就可以了
import ReactDom from 'react-dom'
export function signPop(content, handler) {
let div1 = document.createElement("div");
let pop = <div className="cover">
<div>{content}</div>
<div>
<button onClick={() => {
document.body.removeChild(div1);
console.log("不同意")
handler.cancel && handler.cancel()
}}>不同意</button>
<button onClick={() => {
document.body.removeChild(div1);
console.log("签署")
handler.confirm && handler.confirm()
}}>签署</button>
</div>
</div>
//先将pop存入div中，然后再加入body中
ReactDom.render(pop,div1);
document.body.append(div1)
}
<button onClick={()=>
signPop('我是文本',{
confirm:()=>{
console.log("签署")
},
cancel:()=>{
console.log("取消")
}
})
}> 我是按钮</button>
