创建弹窗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/animate.min.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
<style>
html,body{
margin: 0px;
min-height: 100%;
width: 100%;
}
.warp{
width: 500px;
height: 300px;
border-radius: 10px;
background: brown;
margin: 0px auto;
margin-top:30px;
box-shadow: 0px 0px 40px 0px white;
}
.mask{
position: absolute;
width: 100%;
min-height: 100%;
background:rgba(0,0,0,0.5);
top:0px;
}
#show{
position: absolute;
}
#content{
height: 1400px;
width: 300px;
margin: 0px auto;
}
</style>
</head>
<body>
<input type="button" value="创建" id="show" />
<div id="content"></div>
</html>
<script>
$(function(){
$('#show').click(function(){
var height=$("body").height();
$(document.body).append("<div class='mask'><input type='button' value='关闭' id='close' /><div class='warp'></div></div>");
$('.mask').css("height", height);
$('.mask').addClass('animated zoomInDown');
$('.warp').addClass('animated zoomInDown');
$('#close').click(function(){//关闭按钮
$('.mask').addClass('animated zoomOutUp');//出场动画
$('.warp').addClass('animated zoomOutUp');
$(function(){setTimeout(function(){//结束之后删除div
$(".mask").remove();
},2000);})
})
})
//抖动（shake）
//闪烁（flash）
// 弹跳（bounce）
// 翻转（flip）
// 旋转（rotateIn/rotateOut）
// 淡入淡出（fadeIn/fadeOut）
// 缩放（zoom）
// animated 类似于全局变量，它定义了动画的持续时间；bounce 是动画具体的动画效果的名称，你可以选择任意的效果。
//如果动画是无限播放的，可以添加 class infinite。
//有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：
//$(function(){
// $('#dowebok').addClass('animated bounce');
// setTimeout(function(){
// $('#dowebok').removeClass('bounce');
// }, 1000);
//});
});
</script>本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2015-09-24，如有侵权请联系 cloudcommunity@tencent.com 删除
本文分享自 交互设计前端开发与后端程序设计 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体分享计划 ，欢迎热爱写作的你一起参与！
评论
登录后参与评论
推荐阅读