您的位置：首页 > Web前端 > JQuery

Jquery 生成页面顶端的滑动弹出式提示框效果

2015-04-28 10:36 267 查看

html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./test.css">
</head>

<body>
<div id="container">
<div id="notification">
<span id="msg"><i class="fa fa-info-circle"></i><span>系统错误，请稍后重试</span></span>
<span id="close" class="fa fa-times"></span>
</div>

<button>系统提示</button>
</div>
</body>

<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$('button').off('click').on('click',function(){
$('#notification').animate({'top':-7});
});
$('#close').off('click').on('click',function(){
$('#notification').animate({'top':-45});
});
});
</script>
</html>

css:

/*CSS源代码*/
@import url('http://cdn.gbtags.com/font-awesome/4.1.0/css/font-awesome.min.css');

button{
width: 80px;
height: 40px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -20px;
position: absolute;
}
body{
background:#CFCFCF;
}
#notification{
width:80%;
line-height:35px;
margin:0 auto;
background:#efb73e;
color:#fff;
font-size:12px;
position:relative;
top:-45px;
}
#notification #msg i{margin:0 10px;}
#notification #close{position:absolute;right:10px;top:10px;cursor:pointer;}

来自这里

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 提示框 html

相关文章推荐

新的分享

章节导航