HTML 自定義彈窗自動消失
阿新 • • 發佈：2018-11-26
html中有一些彈出窗，如alert，confirm等。但是有些我們特定的需求不好實現，比如彈出窗彈出後3s後消失，所以要用到自己定義的彈出窗。如下：參考借鑑：https://zhidao.baidu.com/question/589365277.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 點選按鈕，傳遞顯示資料 --> <button id="btn" onclick="func('資料更新成功')">btn</button> <!-- 顯示的時間彈窗的div --> <div id="date"></div> </body> <script> // 建立一個div var layer=document.createElement("div"); // 設定div的id值 layer.id="layer"; // 上面按鈕點選事件 function func(date){ /* 建立div的樣式，寬200px,高80px，下面的是css樣式居中， * css樣式居中具體瞭解連結：https://blog.csdn.net/A_Bear/article/details/80546181 */ var style={ background:"#f00", position:"absolute", zIndex:10, width:"200px", height:"80px", left:"50%", top:"50%", marginLeft:"-100px", marginTop:"-40px" } for(var i in style) layer.style[i]=style[i]; // 當找不到id為layer的控制元件時 if(document.getElementById("layer")==null){ // 在body中新增layer控制元件（layer在上面建立的） document.body.appendChild(layer); // 設定顯示類容 layer.innerHTML=date; // 將div中文字居中 layer.style.textAlign="center"; layer.style.lineHeight="80px"; // 作用是調節字型行高與div同高，使其保持水平居中 // 設定3s後去掉彈出窗 setTimeout("document.body.removeChild(layer)",3000) } } // 下面是計時控制元件js change(); function change(){ var today; today = new Date(); timeString = today.toLocaleString(); document.getElementById("date").innerHTML = timeString; setTimeout("change();", 100); } </script> </html>