手把手教你实现一个modal对话框

需求：
1、点击一个按钮弹出对话框
2、对话框的事件能够被父组件捕捉
3、对话框里的内容能够随时改变
一、如何实现一个对话框
1.1 创建一个简单的对话框
    简而言之，一个简单的对话框就是一个div（也可能是几个div），怎么创建呢？

function createModal () {
	//创建一个div
	var modalDiv = document.createElement('div');           
	// 给div加点内容
	var modalText=document.createTextNode("这是对话框");  
	modalDiv.appendChild(modalText);
	// 给div加点样式，给他放在页面中间
	modalDiv.style.position = 'absolute';
	modalDiv.style.width = '400px';
	modalDiv.style.height = '400px';
	modalDiv.style.left = 0;
	modalDiv.style.right = 0;
	modalDiv.style.top = 0;
	modalDiv.style.bottom = 0;
	modalDiv.style.margin = 'auto';
	modalDiv.style.backgroundColor = 'grey';
	// 把div放到页面中
	document.body.appendChild(modalDiv);
}
// 创建一个按钮触发这个事件，如果你比较懒，可以把createModal中的内容copy到console中，就可以看到对话框了
<button type&