点击弹窗提示，3秒后关闭窗口并跳转新的页面

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>

<style type="text/css" >
/*灰色遮罩层*/
.fade{
width:100%;
height:100%;
background:rgba(0, 0, 0, 0.5);
position: fixed;
left: 0;
top: 0;
z-index: 99;
}
/*弹出层*/ 
.succ-pop{
width: 400px;
height: 300px;
background: #fff;
position: fixed;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
z-index: 999;
border-radius: 5px;
} 
.succ-pop h3.title{
text-align: center;
font-size: 22px;
color: #ce002c;
}

</style>
<script>
function showDiv(){
$("#fade").show();
$("#pop").show();
setTimeout(function(){
//var windowOpen = window.open("http://www.baidu.com");
//if (windowOpen == null || typeof(windowOpen)=='undefined'){
//$('#feedback').html('新窗口无法打开，请检查你的浏览器设置。')
window.location.href="http://www.baidu.com";
}    
hideDiv();
}, 3000);
}
function hideDiv(){
$("#fade").hide();
$("#pop").hide();
}
</script>
</head>
<body>

<div class="fade" id="fade" style="display:none"></div>
<div class="succ-pop" id="pop" style="display:none">
<h3 class="title">
提示文字
</h3>    
</div>

<input id="show" type="button" readonly="readonly" value="点击显示" onclick="showDiv()"/>

</body>
</html>
　　
View Code
复制代码

 

posted @   Mr.peter  阅读(457)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
历史上的今天：
2016-11-13 Linux服务器上安装MySql数据库（默认安装，密码为空），首次使用需要修改密码
点击右上角即可分享
微信分享提示