简单的小弹窗

最新推荐文章于 2024-10-04 17:24:00 发布

weixin_30457065

最新推荐文章于 2024-10-04 17:24:00 发布

阅读量84

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zengkai/p/7810491.html

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#Pop-ups{
/*display: none;*/
position: absolute;
left: 50%;
top: -50%;
margin-left:-135px;
padding:10px;
border-radius:5px;
background: #009A49;
transition:1s;
}
</style>
<script src="dist/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body style="">
<input type="button" name="" id="btn" value="点击显示弹窗" />
<div id="Pop-ups" style="">
<div id="hide" style="height: 30px;color: white;">标题</div>
<div id="center"style="width: 250px;height: 120px;background: white; text-align: center; vertical-align:middle;display:table-cell;">
恭喜你添加成功
</div>
</div>
</body>
<script type="text/javascript">

$('#btn').on('click',function(){
$('#Pop-ups').css('opacity','1');
$('#Pop-ups').css('top','30%');
var tiem = setTimeout(function(){
$('#Pop-ups').css('opacity','0');
$('#Pop-ups').css('top','-30%');
},2500)
})

</script>
</html>