插件使用一顶部消息提示---overhang

overhang 是一个非常好的消息提示插件，它是在顶部提示。

官方网站：https://github.com/paulkr/overhang.js

使用方法

1、引入jquery库和jqeury ui库，在国内别用Gooogle的，使用微软的比较好。

1 2	`<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>`

2、引入overhang的css和js。

<link rel="stylesheet" type="text/css" href="dist/overhang.min.css" />
<script type="text/javascript" src="dist/overhang.min.js"></script>

3、接下就可以使用overhang提供的消息提示功能啦。

$("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>