/**
* 弹框提示
* @param ImgSrc 提示图片 值:1=>成功;2=>失败;3=>加载中
* @param Hint 提示内容
* @param Keep 提示显示时间
* @param Urles 调转连接
* @constructor
*/
function Massage(ImgSrc,Hint,Keep,Urles) {
var dom = "<div class='Popout'>" +
"<div class='PopoutBox '>" +
"<div class='PopoutBox-shake animated shake flex justify-content-start align-items-center'>" +
" <img src=''>" +
"<div class='Popout-title font30'>" +Hint+
"</div>" +
"</div>" +
"</div>" +
"</div>";
if(ImgSrc == 1){
//成功提示
$("body").append(dom);
$(".PopoutBox img").attr('src','public/image/icon-succeed.png');
}else if (ImgSrc == 2){
//失败提示
$("body").append(dom);
$(".PopoutBox img").attr('src','public/image/icon-failure.png');
}else if(ImgSrc == 3){
//加载
$("body").append(dom);
$(".PopoutBox img").attr('src','public/image/icon-load.gif');
}
var times = setTimeout(function () {
clearTimeout(times);
$(".Popout").remove();
if(Urles){
window.location.href = Urles;
}
},Keep?Keep:2000);
}
.Popout{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
}
.PopoutBox{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.PopoutBox-shake{
min-height: 1.2rem;
min-width: 3rem;
padding: 0.2rem;
box-sizing: border-box;
-moz-box-shadow:0px 1px 0.2rem rgba(31,31,31,0.2);
-webkit-box-shadow:0px 1px 0.2rem rgba(31,31,31,0.2);
box-shadow:0px 1px 0.2rem rgba(31,31,31,0.2);
-webkit-border-radius: 0.08rem;
-moz-border-radius: 0.08rem;
border-radius: 0.08rem;
overflow: hidden;
background: #fff;
box-sizing: border-box;
}
.PopoutBox img{
width: 0.5rem;
margin-right: 0.1rem;
}
.Popout-title{
color: #57a3f5;
}
#animated,
.animated {
animation-duration: 1s;
animation-fill-mode: both
}
@keyframes shake {
0%,to {
transform: translateZ(0)
}
10%,30%,50%,70%,90% {
transform: translate3d(4px,0,0)
}
20%,40%,60%,80% {
transform: translate3d(4px,0,0)
}
}
网友评论