弹窗效果:
- 创建一个弹窗组件(javascript)
pageTanChuang.js
function func(){
var layer=document.createElement("div");
layer.id="layer";
var style={
background:"#00ffff",
position:"relative",
zIndex:999,
width:"200px",
height:"80px",
left:"87%",
top:"10%",
}
for(var i in style)
layer.style[i]=style[i];
document.body.appendChild(layer);
layer.innerHTML=document.getElementById('ipt').value;
layer.style.textAlign="center";
layer.style.lineHeight="80px";
setTimeout("document.body.removeChild(layer)",3000)
}
- controller执行
访问zhuce.do路径,在session中添加提示信息,并跳转到zhuce页面
@Controller
public class controller {
@GetMapping("/zhuce.do")
public String page(HttpSession session){
session.setAttribute("reasonTips","删除失败");
return "zhuce";
}
@GetMapping("/show.do")
public String page1(){
return "show";
}
}
- zhuce页面
点击确定,调转到show.do控制器,转到show页面
<!doctype html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
<meta charset="utf-8"/>
<title>操作页面</title>
</head>
<body>
<input type="button" value="确定" th:onclick="javascript:location='show.do'" /> <br/><br/>
</body>
</html>
-
show页面显示弹窗 1. 通过<script-type=“text/javascript” language=“javascript” src=“pageTanChuang.js” charset=“utf-8”></ script>引用js文件 2. 当跳转到show页面通过<body-οnlοad=“func()”/>标签自动调用函数实现弹窗
<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tips</title>
</head>
<body>
<input th:if="${session.reasonTips}!=null" type="hidden" id="ipt" th:value="${session.reasonTips}"/>
<input th:if="${session.reasonTips}==null" type="hidden" id="ipt" th:value="操作成功"/>
<body onload="func()"/>
<script type="text/javascript" language="javascript" src="pageTanChuang.js" charset="utf-8"></script>
</body>
</html>
- 效果截图
|