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>
2630
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
