overhang 是一个非常好的消息提示插件，它是在顶部提示。
官方网站：https://github.com/paulkr/overhang.js
使用方法
1、引入jquery库和jqeury ui库，在国内别用Gooogle的，使用微软的比较好。
|
1
2
|
|
2、引入overhang的css和js。
|
1
2
|
<link rel="stylesheet" type="text/css" href="dist/overhang.min.css" /><script type="text/javascript" src="dist/overhang.min.js"></script> |
3、接下就可以使用overhang提供的消息提示功能啦。
|
1
2
3
4
|
$("body").overhang({ type: "success", message: "Woohoo! Our message works!"}); |
更多示例，下载https://github.com/paulkr/overhang.js上的源码。
示例demo
<!DOCTYPE html5>
<html>
<head>
<title>消息提示</title>
<meta charset="UTF-8" />
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
<script type="text/javascript" src="dist/overhang.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/overhang.min.css" />
<style type="text/css">
body{
text-align:center;
}
button{
margin-top:20%;
margin-left:auto;
margin-right:auto;
text-align:center;
}
</style>
</head>
<body>
<button>点我</button>
<script>
$('button').on('click',function(){
$("body").overhang({
type: "success",
message: "Woohoo! Our message works!"
});
});
</script>
</body>
</html>