技術標籤：功能實現jscssjavascripthtml

使用原生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將該元素新增進父級元素中。
千篇一律往下套，個人覺得最重要的還是思路，思路捋清了程式碼就很簡單！