界面操作结果提示弹出框2--遮罩层效果

js包含了html代码和显示消失的功能,忽然想起来link可以去掉css的,因为在其他html界面里会调用这些css样式

suernk.js如下:

//brace.html里的三个弹出框,为了避免调用麻烦,将弹出框放到js里
//document.write("<link rel='stylesheet' href='../css/all.css' /><link rel='stylesheet' href='../css/icon.css' /><link rel='stylesheet' href='../css/index.css' /><div class='pop popsu' id='success'><div class='popicon iconsuccess'>操作成功</div><div class='popcontent popsucon contentspan'></div></div>	<div class='pop poper' id='error'><div class='popicon iconerror'>操作失败</div><div class='popcontent popercon contentspan'></div></div>	<div class='pop popnotk' id='warn'>	<div class='popicon iconwarn'>操作错误</div><div class='popcontent popwacon contentspan'></div></div>");
//document.write("<link rel='stylesheet' href='../css/all.css' /><link rel='stylesheet' href='../css/icon.css' /><link rel='stylesheet' href='../css/index.css' /> <div class='mask'><div class='pop popsu' id='success'><div class='popicon iconsuccess'>操作成功</div><div class='popcontent popsucon contentspan'></div></div></div>  <div class='mask'><div class='pop poper' id='error'><div class='popicon iconerror'>操作失败</div><div class='popcontent popercon contentspan'></div></div></div>  <div class='mask'><div class='pop popnotk' id='warn'><div class='popicon iconwarn'>操作错误</div><div class='popcontent popwacon contentspan'></div></div></div>");
document.write("<link rel='stylesheet' href='../css/all.css' /><link rel='stylesheet' href='../css/icon.css' /><link rel='stylesheet' href='../css/index.css' /> <div class='mask'></div> <div class='pop popsu' id='success'><div class='popicon iconsuccess'>操作成功</div><div class='popcontent popsucon contentspan'></div></div> <div class='pop poper' id='error'><div class='popicon iconerror'>操作失败</div><div class='popcontent popercon contentspan'></div></div> <div class='pop popnotk' id='warn'><div class='popicon iconwarn'>操作错误</div><div class='popcontent popwacon contentspan'></div></div>");


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

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

//背景
$(".mask").hide();

$(".pop").hide();

function success(contentspan){
	
	$(".contentspan").html(contentspan);
	$("#success").show().delay(1000).hide(600);
	$(".mask").show().show().delay(1000).hide(600);
	console.log("调用success弹出框");
}
function error(contentspan){
	$(".contentspan").html(contentspan);
	$(".mask").css("background-color", "#fcfbf1");
	$("#error").show().delay(1000).hide(600);
	$(".mask").show().show().delay(1000).hide(600);
}
function warn(contentspan){
	$(".contentspan").html(contentspan);
	$(".mask").css("background-color", "#f0f0cd");
	$("#warn").show().delay(1000).hide(600);
	$(".mask").show().show().delay(1000).hide(600);
}

css样式如下:

/*操作提示框下图标*/
.iconsuccess{background: url(../img/icon/success.png); color: #009966;}
.iconerror{background: url(../img/icon/error.png); color: #e47609;}
.iconwarn{background: url(../img/icon/notknow.png); color: #000000b5;}
/*遮罩层弹出框样式-suernk.html(success error warn)*/
.mask{width: 100%; height: 100%; background-color: #9bb78f; position: absolute; top: 0; left: 0;z-index: 2; opacity:0.3; filter: alpha(opacity=30);}
.pop{height: 10rem; width: 16rem; border-radius: 1rem; text-align: center; margin: auto; position: absolute; z-index: 3;}
.popicon{height: 2rem; width: 8rem; background-repeat: no-repeat; margin-left: 0.5rem; margin-top: 0.5rem; padding-top: 0.5rem; padding-left: 0.5rem;}
.popcontent{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; }/*获取操作内容可自动换行*/

猜你喜欢

转载自blog.csdn.net/weixin_42574481/article/details/84773610