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

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

使用方法

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

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>

　　

插件使用一顶部消息提示---overhang的更多相关文章

  1. 一个简单的消息提示jquery插件

    最近在工作中写了一个jquery插件,效果如下: 就是一个简单的提示消息的一个东西,支持最大化.最小化.关闭.自定义速度.自定义点击事件,数据有ajax请求和本地数据两种形式.还有不完善的地方,只做了 ...

  2. jquery插件：仿百度首页可展开收起的消息提示控件

    消息提示插件大伙并不陌生了,无论是个系统还是网站,基本都要有消息系统.但我认为,一个好的提示插件应当具备很好的独立性,不与页面其他元素发生任何关系,其次是能对外提供丰富的接口,因为你生来就是被别人来调 ...

  3. 消息提示插件toastr.js与Messenger组件

    Toastr是一款基于jQuery的通知插件,可以灵活的自定义样式和拓展其功能! toastr是一个基于Jquery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. cdn最 ...

  4. 消息提示和消息推送插件toastr

    http://www.jq22.com/yanshi476 比较棒的消息提示和消息推送插件toastr function myIntervalshow() { // showPopup1(300, 1 ...

  5. Jquery消息提示插件toastr使用详解

    toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 1.使用很简单,首选引入toastr的js.css文件 html <script s ...

  6. 基于jQuery消息提示框插件Tipso

    今天要分享的这款jQuery消息提示框插件名叫Tipso,它的特点是可以定义提示框的显示位置,以及动态改变提示框的提示内容,应该说是一款相当灵活的jQuery消息提示框插件.效果图如下: 在线预览   ...

  7. Jquery消息提示插件toastr使用

    toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 相关文件到官网去下载即可 1.引入toastr的js和css文件 <link hre ...

  8. js消息提示框插件-----toastr用法

     (本文系转载) 因为个人项目中有一个提交表单成功弹出框的需求,从网上找了一些资料,发现toastr这个插件的样式还是不错的.所以也给大家推荐下,但是网上的使用资料不是很详细,所以整理了一下,希望能给 ...

  9. Jquery消息提示插件toastr

    toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 1.使用很简单,首选引入toastr的js.css文件 <script src=&q ...

随机推荐

  1. list补充，append()、extend()、insert()、remove()、del()、pop()、分片

    1.添加 append(object),是指在列表的末尾添加一个元素. >>> arr = [1,2,'a','你好',[11,22,33]] >>> arr [1 ...

  2. NOIP2018 20天训练

    Day 0 2018.10.20 其实写的时候已经是Day 1了--(凌晨两点) 终于停课了,爽啊 get树状数组+线段树(延迟标记) 洛谷:提高组所有nlogn模板+每日一道搜索题(基本的图的遍历题 ...

  3. codevs 1081 线段树练习2 （线段树）

    题目: 题目描述 Description 给你N个数,有两种操作 1:给区间[a,b]的所有数都增加X 2:询问第i个数是什么? 输入描述 Input Description 第一行一个正整数n,接下 ...

  4. Linux下clock计时函数学习【转】

    转自:https://www.cnblogs.com/wfwenchao/p/5195022.html 平时在Linux和Winows下都有编码的时候,移植代码的时候免不了发现一些问题.1. 你到底准 ...

  5. linux的/etc/profile环境变量设置不生效【原创】

    设置/etc/profile的java环境变量不生效 修改环境变量 /etc/profile JAVA_HOME=/opt/software/jdk1..0_25 PATH=/usr/local/sb ...

  6. 鼠标事件event和坐标

    鼠标事件(e=e||window.event) event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标 ...

  7. mongodb 创建更新语法

    创建文档 向MongoDB插入数据,使用insert, 如:db.refactor.insert({"refactor's blog":"http://www.cnblo ...

  8. 关于nginx服务器上传限制

    nginx的上传参数问题,需要特别注意client_max_body_size这个参数,否则会中断在nginx的请求中,在php中无法log到访问的.修改了php.ini文件如下:参数 设置 说明fi ...

  9. centos6下安装php7的memcached扩展

    安装php7的memcached扩展 .编译安装libmemcached- wget https://launchpadlibrarian.net/165454254/libmemcached-1.0 ...

  10. Mysql41道练习题

    1.自行创建测试数据 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号.ps:针对的是自己的生物成绩比物理成绩高,再把符合条件的学生的学号查出来: # 查到 生物 和 物理的 id: sele ...