JavaScript 實現簡單的 彈出框關閉框
阿新 • • 發佈：2018-11-09
JavaScript 實現簡單的 彈出框關閉框
知識點:
1.javaScript 新增HTML標籤
2.javaScript 新增HTML標籤屬性
3.javaScript 追加元素
程式碼獻上:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; } html,body{ height:100%; } #box{ width: 100%; height: 100%; } #content{ position: relative; top: 150px; width: 200px; /*line-height: 200px;*/ height: 200px; text-align: center; color: red; background: green; margin: auto; } #span1{ position: fixed; background-color: red; top:0; right:0; width: 30px; height: 30px; line-height: 30px; text-align: center; color: #ffffff; } </style> </head> <body > <button id="btn">彈出</button> </body> <script type="text/javascript"> // 獲取dom元素 1.獲取事件源 var oBtn = document.getElementById('btn'); // 建立彈出模態框的相關DOM物件 var oDive = document.createElement('div'); var oP = document.createElement("p") var oSpan = document.createElement('span') // 設定屬性 oDive.id = 'box'; oP.id = 'content'; oSpan.innerHTML = 'X'; oP.innerHTML = '恭喜IG獲得S8冠軍!'; oSpan.id = 'span1;'; // 追加元素 oDive.appendChild(oP); oP.appendChild(oSpan); // 點選彈出按鈕 彈出模態框 oBtn.onclick = function(){ // 動態的新增到body中一個div this.parentNode.insertBefore(oDive,oBtn) } // 點選x, 關閉模態框 oSpan.onclick = function () { // 移除oDiv元素 oDive.parentNode.removeChild(oDive) } </script> </html>