弹出层的实现

yizhe

弹出层的实现，不论是做分类还是什么，弹出层都是一个app中必须的，那么弹出层该如何实现呢？

这里是由官方的金龙老师推荐的方法，现在教给大家。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>弹出层</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,body{
height: 100%;
background-color: transparent;
overflow: hidden;
}
#wp{
display: -webkit-box;
height: 100%;
}
#main{
width: 75%;
background-color: #eee;
-webkit-transition: all .3s;
transition:all .3s;
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
#main.in{
transform: translateX(0%);
-webkit-transform: translateX(0%);
}
#fill{width: 25%;}
</style>
</head>
<body>
<div id="wp">
<div id="main" class="">
</div>
<div id="fill"></div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript">
apiready = function(){
var $list = $('#main');
$list.addClass('in');
$(document.body).on('touchend',function(evt){
if(!$.contains($list[0], evt.target)){
$list.removeClass('in');
setTimeout(function(){
api.closeFrame();
},350);
}
});
};
</script>
</html>

复制代码

简单来说一下，其实也很简单，就是用到了css3的特性，利用css3作动画效果。

先写好css类，写好之后把translateX设置为-100%；然后再加一个in的类，再把translateX设置为0%；

最后，就是在apiready中添加in这个类即可。

ps：这个页面用openFrame打开，需要注意的是给bgcolor设置透明度bgColor: 'rgba(0,0,0,0.6)'

好了。刚才一直在研究51用车的那个版本切换效果，也没整好，回头有时间弄个弹出层的插件供大家使用。

graysheep

马克吐温

ACFans51

给力

yyyfx

支持一下，很不错的方法

byronchen

火钳刘明

福大亨

验证成功了，感谢分享！