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. valueForKeyPath用途

    可能大家对- (id)valueForKeyPath:(NSString *)keyPath方法不是很了解. 其实这个方法非常的强大,举个例子: NSArray *array = @[@"n ...

  2. 第二节，surf特征检测关键点，实现图片拼接

    初级的图像拼接为将两幅图像简单的粘贴在一起,仅仅是图像几何空间的转移和合成,与图像内容无关:高级图像拼接也叫做基于特征匹配的图像拼接,拼接时消去两幅图像相同的部分,实现拼接全景图. 实现步骤: 1.采 ...

  3. [转] 解决Driver/library version mismatch

    跑模型 torch.cuda.is_available()返回 False nvidia-smi返回:Failed to initialize NVML: Driver/library version ...

  4. Deep Learning Tutorial - Convolutional Neural Networks(LENET)

    CNN很多概述和要点在CS231n.Neural Networks and Deep Learning中有详细阐述,这里补充Deep Learning Tutorial中的内容.本节前提是前两节的内容 ...

  5. ffmpeg h264 encdoer 速度对比

    h264_qsv frame= 250 fps=0.0 q=-0.0 Lsize= 1401kB time=00:00:10.00 bitrate=1146.8kbits/s speed= 14x l ...

  6. docker拉取镜像报错：net/http: TLS handshake timeout.

    docker拉取镜像报错:net/http: TLS handshake timeout. 启动一个后台的busybox容器 [yunva@node1 network-scripts]$ docker ...

  7. 外网zabbix-server使用主动模式监控公司内网windows服务器

    外网zabbix-server使用主动模式监控公司内网windows服务器 1.Zabbix Agent active批量调整客户端为主动模式监控将Template OS Windows模板调整为主动 ...

  8. Windows10下Django虚拟环境配置和简单入门实例

    环境win10家庭版64位 + python 3.5 + Django 1.8.2 1.创建virtualenv目录 开始/运行/cmd回车,进入cmd窗口,到自己指定的目录下创建virtualenv ...

  9. Windows中查看端口占用及关闭对应进程

    开始--运行--cmd 进入命令提示符 输入netstat -ano 即可看到所有连接的PID,之后在任务管理器(右键电脑屏幕的状态栏即可找到)中找到这个PID所对应的程序.如果任务管理器中没有PID ...

  10. [MySQL]子语句的查询技巧

    一.统计group by语句的行数 group by语句中,如果包含字段统计函数(诸如:count(),sum()...),这种情况下统计函数只会作用于group by的字段,因此想拿到最终结果的行数 ...