界面操作结果提示弹出框

总涉及两个文件suerwa.html和suernk.js，这两个文件可以放在一个html里，如下为样式

suerwa.html如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/all.css" />
		<link rel="stylesheet" href="../css/icon.css" />
		<link rel="stylesheet" href="../css/index.css" />
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
	</head>
	<body>
		<div class="pop popsu" id="success"> 
			<div class="popicon iconsuccess"></div>
			<div class="popcontent popsucon"><span class="contentspan"></span>成功！</div>
		</div>
		<div class="pop poper" id="error">
			<div class="popicon iconerror"></div>
			<div class="popcontent popercon">失败！请重试</div>
			
		</div>
		<div class="pop popnotk" id="warn">
			<div class="popicon iconwarn"></div>
			<div class="popcontent popwacon">错误，请重试</div>
			
		</div>
		<!--<button onclick="xx('12145764168761537864125458455553')">测试消失</button>-->
		<!--js调用这些弹出框-->
		<script type="text/javascript" src="../js/suernk.js" ></script>
	</body>
</html>

suernk.js如下，弹出框已经隐藏了，去掉hide可显示，此外使用时候记得调用jquery

//该js为获取弹出框,设置弹出框弹出位置，提供给php所写

//浏览器可视区高度
var he = $(window).height();
console.log(he);
//弹出框高度
var ph = $(".pop").height();
console.log(ph);
//弹出框弹出时离顶部距离
var mg = (he-ph)/2;
console.log(mg);
$(".pop").css("margin-top", mg);

$(".pop").hide();
function success(contentspan){
	$(".contentspan").html(contentspan);
	$("#success").show().delay(1000).hide(600);
	console.log("调用success弹出框");
}
function error(contentspan){
	$(".contentspan").html(contentspan);
	$("#error").show().delay(1000).hide(600);
}
function warn(contentspan){
	$(".contentspan").html(contentspan);
	$("#warn").show().delay(1000).hide(600);
}
//测试所用
function xx(contentspan){
	$(".contentspan").html(contentspan);
	$("#error").show().delay(1000).hide(600);
}

之所以把函数写成带参的，是想在php调用的时候传递响应的数据

如下为css样式：

/*操作提示框下图标*/
.iconsuccess{background: url(../img/icon/success.png);}
.iconerror{background: url(../img/icon/error.png);}
.iconwarn{background: url(../img/icon/notknow.png);}

/*弹出框样式-suernk.html(success error notknow)*/
.pop{height: 10rem; width: 16rem; border-radius: 1rem; text-align: center; margin: auto; }
.popicon{height: 2.5rem; width: 3rem; background-repeat: no-repeat; margin-left: 0.5rem; margin-top: 0.5rem;}
.popcontent{/*display: inline-block;*/margin: auto; width: 90%; padding-top: 2rem; font-size: 1.2rem;}
.popsu{background-color: #b1dcce8c;}
.popsucon{border-top: 2px solid #02805663; color: #009966;}
.poper{background-color: #ff993342;}
.popercon{border-top: 2px solid #f18010; color: #e47609;}
.popnotk{background-color: #ffffcc;}
.popwacon{border-top: 2px solid #0000008c; color: #000000b5;}
.contentspan{word-wrap: break-word; font-size: 1.2rem;}/*获取操作内容可自动换行*/

界面操作结果提示弹出框

猜你喜欢