<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>延时加载弹窗</title> <style type="text/css"> body{ height: 2000px; } .box{ position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background-color: #333; opacity: 0.8; display: none; } .pop{ position: absolute; left: 50%; top: 50%; transform:translate(-50%, -50%); background-color: #fff; padding: 100px; } .close{ position: absolute; right: 10px; top: 10px; width:30px; height: 30px; line-height: 30px; text-align: center; font-size: 14px; border: 1px solid #ededed; padding: 5px; } </style> </head> <body> <p>打开页面10秒后会有弹窗弹出</p> <div class="box" id="box"> <div class="pop"> <p>定时弹窗 关闭后10秒再次弹出</p> <span class="close" id="close">关闭</span> </div> </div> </body> <script type="text/javascript"> var bojbox=document.getElementById('box'); // 获取弹窗对象 window.onload=setTimeout(function(){bojbox.style.display='block'},5000); // 页面加载后5秒运行延时器 打开弹窗 document.getElementById('close').onclick=function(){ // 点击弹窗的关闭按钮后 bojbox.style.display = 'none'; //先关闭弹窗 setTimeout(pop,10000) //然后10秒后运行延时器 运行fun 函数 fun() 带括号就是运行函数的结果 } function pop(){ bojbox.style.display ='block' } </script> </html>