原生js写简易模态框

使用原生js实现一个简易的模态框

首先上效果图：
思路：首先创建一个button按钮，显示，其次创建一个div大框，隐藏，div中包含有一个子元素p，p元素中包含有一个子元素span。点击button按钮，触发div显示、button隐藏，点击span关闭事件，触发div隐藏、button显示。

遇到的问题：因为我是使用DOM节点的知识用javascript实现的，所以在创建好第一个div大框的时候，我不知道怎么添加进body父级元素中

解决方案：最开始使用body.appendChild(div)，总是报错，后来我去网上查找了一下：document.body.appendChild(div);
这个就没毛病，解决！
上代码：

body{padding: 0;margin: 0;}

<button type="button" onclick="onLog()" id="log_but">登录</button>

<script type="text/javascript">
	var log_div=document.createElement("div");
	log_div.setAttribute("style","display: none;");
	document.body.appendChild(log_div);
	var log_p=document.createElement("p");
	log_p.setAttribute("style","width: 300px;height: 300px;background: white;margin: 0 auto;text-align: center;")
	log_p.innerHTML="登陆成功";
	log_div.appendChild(log_p);
	var log_span=document.createElement("span");
	log_span.setAttribute("style","width: 20px;height: 20px;padding: 0;margin: 0;float: right;background: brown;color: white;cursor: pointer;")
	log_span.innerHTML="X";
	log_p.appendChild(log_span);
	log_span.onclick=function(){
		log_div.setAttribute("style","display: none;");
		log_but.setAttribute("style","display: block;");
	}
	function onLog(){
		log_div.setAttribute("style","display: block;width: 100%;height: 620px;background: #E3E3E3;");
		log_but.setAttribute("style","display: none;");
	}
</script>

总结下来无非就是createElement创建一个元素，setAttribute设置该元素的样式，appendChild将该元素添加进父级元素中。
千篇一律往下套，个人觉得最重要的还是思路，思路捋清了代码就很简单！