一.关于实现浏览器弹窗提示内容几秒后自动消失重定向执行其他函数的两种方法
2024-05-15 02:37:55
一.关于实现浏览器弹窗提示内容几秒后自动消失重定向执行其他函数的两种方法
第一种方法–向body动态写入div标签调用css效果显示：
(新建***.jsp放在WebContent根目录下直接访问ip:端口\项目名\ **…jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="css/base.css" rel="stylesheet" type="text/css" /> <!-- 项目名/WebContent/css（文件夹）/base.css -->
<script src="js/jquery-1.4.4.min.js"></script> <!-- 项目名/WebContent/js（文件夹）/jquery-1.4.4.min.js -->
<script type="text/javascript">
function success_prompt(message)
{var a=1;$('<div>').appendTo('body').addClass('alert').html(message).show().delay(3000).fadeOut();//setTimeout("jump()", 3000);setTimeout(function jum(){if(a==1){window.location.href="http://www.baidu.com"}else{window.location.href="http://www.2345.com"}},3000);
};
</script>
</head>
<body>
<button onclick="success_prompt('俺老孙在此！')">叫你一声，你敢答应吗？</button>
</body>
</html>
css部分：
.alert {display: none;position: fixed;text-align: center;top: 50%;left: 50%;min-width: 200px;min-height: 20px;margin-left: -100px;z-index: 99999;padding: 10px 20px 10px 20px;border: 1px solid transparent;border-radius: 4px;
}
第二种方法–重写alert（）方法：
(新建***.jsp放在WebContent根目录下直接访问ip:端口\项目名\ **…jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="css/base.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
function a(){alert("当前货位库存数量：48把,本次拣货成功！");
}
</script>
<script type="text/javascript">window.alert = function(str) {var alertBox = document.createElement("div");alertBox.id="alertBox";alertBox.style.position = "absolute";alertBox.style.width = "400px";alertBox.style.background = "#F2F2F2";alertBox.style.border = "1px solid grey";alertBox.style.left = "50%";alertBox.style.top = "50%";alertBox.style.transform = "translate(-50%, -50%)";alertBox.style.textAlign = "center";alertBox.style.zIndex = "100";var strHtml = "";strHtml += '<div id="title">提示：<div id="close" οnclick="certainFunc()"></div></div>';strHtml += '<div id="content">'+str+'</div>';strHtml += '<div id="certain"><button id="btn" οnclick="certainFunc()">确 定</button></div>';//strHtml += '<div id="certain"><input id="btn" type="button" value="确 定" οnclick="certainFunc()" onhover="hoverFunc()"/></div>';alertBox.innerHTML = strHtml;document.body.appendChild(alertBox);var title = document.getElementById("title");title.style.textAlign = "left";title.style.marginTop = "20px";title.style.paddingLeft = "20px";title.style.height = "30px";title.style.fontSize = "15px";var close = document.getElementById("close");close.style.width = "16px";close.style.height = "16px";close.style.marginRight = "20px";close.style.background = "url('images/close.png')";close.style.float = "right";var content = document.getElementById("content");content.style.margin = "20px";content.style.fontSize = "12px";var certain = document.getElementById("certain");certain.style.position = "relative";certain.style.height = "50px";certainFunc = function() {alertBox.parentNode.removeChild(alertBox);var x=document.getElementById("spa");//这里是向body的<span id="spa"></span>中插内容x.innerHTML="Hello World a !"; };var btn = document.getElementById("btn");btn.style.width = "60px";btn.style.height = "30px";btn.style.background = "#cccccc";btn.style.border = "1px solid grey";btn.style.position = "absolute";btn.style.borderRadius = "5px";btn.style.right = "20px";btn.style.bottom = "20px";btn.style.marginTop = "10px";btn.style.cursor = "pointer";btn.style.color = "#333";hoverFunc = function() {btn.style.border = "1px blue solid";}; setTimeout(function autoClick() {// IEif(document.all) {document.getElementById("btn").click();}// 其它浏览器else { var e = document.createEvent("MouseEvents");e.initEvent("click", true, true);document.getElementById("btn").dispatchEvent(e);}}, 3000);
}
</script>
</head>
<body>拣货数量：<input type="text" width="300" value="1"><br>确认货位：<input type="text" width="300" ><br>
<button onclick="a()">确认拣货:</button> <input type="text" width="100"/><a href="">其他货位库存</a><br>
<span id="spa"></span>
</body>
</html>
一.关于实现浏览器弹窗提示内容几秒后自动消失重定向执行其他函数的两种方法相关推荐
- 网页弹出提示框3秒后自动消失
页面弹出提示框3秒后自动消失 <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
- Axure实现提示文本单击显示后自动消失的效果
Axure实现提示文本单击显示后自动消失的效果 方法/步骤 如图所示,框出的部分为提示文本(已经命名为tooltip),希望达到的效果是默认加载时不显示,点击帮助图标后显示,且2秒后自动消失. 首先在 ...
- 1秒消失 alert jquery_jquery 弹窗信息显示几秒后自动消失
CSS 样式:<br></br> alert { display: none; position: fixed; top: 50%; left: 50%; min-width: ...
- input文本框中添加提示文字，输入后自动消失
<input placeholder="提示文字"/> 效果: 如果小博的文章对你有所帮助,欢迎点赞留言关注!!!
- axure原件 总是丢失_Axure实现提示文本单击显示后自动消失的效果
FORM 一 .新增的input输入属性 1.email类型 在表单提交E-mail地址时,无效的输入会生成很多无效数据,对后期的数据检索造成一定的影响.所以在表单提交之前,需要对输入的E-mail地 ...
- qt弹出框自动消失的悬浮提示框_QT【简单自定义弹出提示框】：非模态，数秒后自动消失...
目标效果:一个提示信息框,创建后显示提示信息,一定时间后自动消失,不阻塞原来窗口. 思路: 自定义一个控件,继承自QWidget,构造时设置定时器,时间到则自我销毁. ### 实现代码 代码一共两个文 ...
- html中alert弹窗自动消失,模拟alert2秒后自动消失弹出框
//显示框信息 function showMsg(val,time){ if(!document.getElementById('parent_pop_up')){ var parent_pop_up ...
- html广告框,给WordPress首页添加简单广告框弹窗两种方法实现代码+插件
最近大家访问我的博客想必都看到了图片广告弹窗 话说虽然用户不喜欢,但是作为站长的我们却非常需要,毕竟我们也不是用爱发电,也是需要赚点打广告赚点外快来补贴服务器费用的.今天逛夏末浅笑博客的时候看到了这个 ...
- python怎么模拟浏览器交互_干货分享：python爬虫模拟浏览器的两种方法实例分析（赶紧收藏）...
今天为大家带来的内容是:干货分享:python爬虫模拟浏览器的两种方法实例分析(赶紧收藏) 文章主要介绍了python爬虫模拟浏览器的两种方法,结合实例形式分析了Python爬虫模拟浏览器的两种常见操 ...
最新文章
- php数据 文本_php直接调用文本文件内容
- react native native module
- EnableFeignClients注解解析
- [导入]VB实现SQL Server数据库备份/恢复
- 优秀案例：12个精美的设计工作室 设计公司网站
- 个人帐目管理系统java_Java 项目 个人帐目管理系统
- 用C++访问SQL Server 2000的实例
- 05_IOC容器装配Bean(注解方式)
- java 1 0_【Java】1.0 开发环境
- 转载：[Matlab]结构体(Struct)
- 逆序链表--递归思路
- 动态传参, 名称空间, 嵌套, gloabal, nonlocal
- C#图解教程读书笔记（结构）
- 将cpp文件封装成 so 文件并调用
- 购物商城网站建设费用到底贵不贵？
- 神经影像（核磁共振）概念及数据分析学习
- Mysql大数据优化方案
- 微信小程序-编辑器插件
- 探索鼎龙湾德萨斯牛仔小镇，欣赏粤西非遗文化的魅力
- 机器学习所需要的高数知识