zepto+css3提示窗口效果

最新推荐文章于 2021-06-05 13:55:40 发布

yaoyyl

最新推荐文章于 2021-06-05 13:55:40 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/yaoyyl/article/details/52622722

前端专栏收录该内容

45 篇文章

订阅专栏

本文介绍了一个使用Zepto JavaScript库结合CSS3实现的提示窗口效果。该效果包括平滑过渡的背景遮罩及居中弹窗，并通过简单的动画实现弹窗的渐显渐隐效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>zepto+css3提示窗口效果</title>
<style>
*{margin: 0;padding: 0;}
/*提示窗口css*/
.promptBox{position: relative;z-index: 99;}
.proBj{position: fixed;z-index:90;width: 100%;height: 100%;top: 0;left: 0;background-color: #000000;opacity: 0.45;filter:alpha(opacity=45);}
.proBj-hide{opacity: 0;filter:alpha(opacity=0);}
.proBj{
animation: proBjFirst 0.3s;
-moz-animation: proBjFirst 0.3s; /* Firefox */
-webkit-animation: proBjFirst 0.3s; /* Safari 和 Chrome */
-o-animation: proBjFirst 0.3s; /* Opera */
}
.proBj-hide{
animation: proBjFirstHide 0.3s;
-moz-animation: proBjFirstHide 0.3s; /* Firefox */
-webkit-animation: proBjFirstHide 0.3s; /* Safari 和 Chrome */
-o-animation: proBjFirstHide 0.3s; /* Opera */
}
@keyframes proBjFirst
{
0% {opacity: 0;filter:alpha(opacity=0);}
100% {opacity: 0.45;filter:alpha(opacity=45);}
}

@-moz-keyframes proBjFirst /* Firefox */
{
0% {opacity: 0;filter:alpha(opacity=0);}
100% {opacity: 0.45;filter:alpha(opacity=45);}
}

@-webkit-keyframes proBjFirst /* Safari 和 Chrome */
{
0% {opacity: 0;filter:alpha(opacity=0);}
100% {opacity: 0.45;filter:alpha(opacity=45);}
}

@-o-keyframes proBjFirst /* Opera */
{
0% {opacity: 0;filter:alpha(opacity=0);}
100% {opacity: 0.45;filter:alpha(opacity=45);}
}
@keyframes proBjFirstHide
{
0% {opacity: 0.45;filter:alpha(opacity=45);}
100% {opacity: 0;filter:alpha(opacity=0);}
}

@-moz-keyframes proBjFirstHide /* Firefox */
{
0% {opacity: 0.45;filter:alpha(opacity=45);}
100% {opacity: 0;filter:alpha(opacity=0);}
}

@-webkit-keyframes proBjFirstHide /* Safari 和 Chrome */
{
0% {opacity: 0.45;filter:alpha(opacity=45);}
100% {opacity: 0;filter:alpha(opacity=0);}
}

@-o-keyframes proBjFirstHide /* Opera */
{
0% {opacity: 0.45;filter:alpha(opacity=45);}
100% {opacity: 0;filter:alpha(opacity=0);}
}
.proComBox{z-index: 95; position: fixed; top: 50%; left: 50%;width: 240px;transform: translateX(-50%) translateY(-50%);}
.proCom{position: relative; width: 100%;height: auto; background-color: #FFFFFF; border-radius: 10px; padding: 15px 0 0;transform: scale(1,1);opacity: 1;}
.proCom-hide{transform: scale(0.5,0.5);opacity: 0;}
.proCom{
animation: proComFirst 0.3s;
-moz-animation: proComFirst 0.3s; /* Firefox */
-webkit-animation: proComFirst 0.3s; /* Safari 和 Chrome */
-o-animation: proComFirst 0.3s; /* Opera */
}
@keyframes proComFirst
{
0% {transform: scale(0.5,0.5);opacity: 0;}
100% {transform: scale(1,1);opacity: 1;}
}

@-moz-keyframes proComFirst /* Firefox */
{
0% {transform: scale(0.5,0.5);opacity: 0;}
100% {transform: scale(1,1);opacity: 1;}
}

@-webkit-keyframes proComFirst /* Safari 和 Chrome */
{
0% {transform: scale(0.5,0.5);opacity: 0;}
100% {transform: scale(1,1);opacity: 1;}
}

@-o-keyframes proComFirst /* Opera */
{
0% {transform: scale(0.5,0.5);opacity: 0;}
100% {transform: scale(1,1);opacity: 1;}
}
.proCom-hide{
animation: proComFirstHide 0.3s;
-moz-animation: proComFirstHide 0.3s; /* Firefox */
-webkit-animation: proComFirstHide 0.3s; /* Safari 和 Chrome */
-o-animation: proComFirstHide 0.3s; /* Opera */
}
@keyframes proComFirstHide
{
0% {transform: scale(1,1);opacity: 1;}
100% {transform: scale(0.5,0.5);opacity: 0;}
}

@-moz-keyframes proComFirstHide /* Firefox */
{
0% {transform: scale(1,1);opacity: 1;}
100% {transform: scale(0.5,0.5);opacity: 0;}
}

@-webkit-keyframes proComFirstHide /* Safari 和 Chrome */
{
0% {transform: scale(1,1);opacity: 1;}
100% {transform: scale(0.5,0.5);opacity: 0;}
}

@-o-keyframes proComFirstHide /* Opera */
{
0% {transform: scale(1,1);opacity: 1;}
100% {transform: scale(0.5,0.5);opacity: 0;}
}
/*提示窗口css END*/

</style>
</head>
<body>
<button onclick='proAdd("提示内容！");'>打开提示窗口</button>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
/**
* 提示窗口
*/
//关闭
function proClose(){
$('.proBj').addClass('proBj-hide');
$('.proCom').addClass('proCom-hide');
setTimeout("document.body.removeChild(document.getElementById('promptBox'))",310);

};
//生成提示
function proAdd(com){
var label=''+
'<div class="promptBox" id="promptBox">'+
'<div class="proBj"></div>'+
'<div class="proComBox">'+
'<div class="proCom">'+
'<div style="text-align: center; margin: 10px 15px 20px;">'+com+'</div>'+
'<p style="height: 1px; width: 100%; border-top: 1px solid #cccccc; -webkit-transform: scaleY(.5);"></p>'+
'<p onclick="proClose()" style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; position: relative;color: #1689ff; width: 100%; border: 0; background-color: inherit; height: 35px; line-height: 35px; display: inline-block; text-align: center;">确认</p>'+
'</div>'+
'</div>'+
'</div>'
$('body').append(label);
};
</script>
</body>
</html>