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. 动态规划 - 198. House Robber

    URL : https://leetcode.com/problems/house-robber/ You are a professional robber planning to rob hous ...

  2. 【Nginx】Nginx简介及在CentOS7.0下安装教程

    是什么 Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.其特点是占有内存少,并发能力强,事实上nginx的并发能 ...

  3. 题解-hdu2866 Special Prime

    Problem hdu-2866 题意:求区间\([2,L]\)有多少素数\(p\)满足\(n^3+pn^2=m^3\),其中\(n,m\)属于任意整数 Solution 原式等价于\(n^2(p+n ...

  4. mysql导入sqlserver数据库表

    原文:https://zhidao.baidu.com/question/1114325744502691499.html 在Navicat for MySQL 管理器中,创建目标数据库(注意:因为是 ...

  5. UPS不间断电源工作原理简述

    原文地址:https://blog.csdn.net/uamix/article/details/52776297 一.定义 UPS即不间断电源,是将蓄电池(多为铅酸免维护蓄电池)与主机相连接,通过主 ...

  6. makefile 中添加依赖的库文件

    当库文件中包含多个头文件和c源文件时,需要执行如下步骤: 1) makefile中添加 库文件依赖, -L 后面跟库文件的路径,  -l(小写)后面跟库的名字 2)将库文件中的头文件添加到工程中去,使 ...

  7. 谓词逻辑 p->q 的真假

    若p为假,则q可取真或假,p->q为永真 若p为真,q为假,则p->q为假 若p为真,q为真,则p->q为真 p q p->q 0 0 1 0 1 1 1 0 0 1 1 1 ...

  8. 【原创】大数据基础之Presto（1）简介、安装、使用

    presto 0.217 官方:http://prestodb.github.io/ 一 简介 Presto is an open source distributed SQL query engin ...

  9. [Linux]关于字节序的解析

    剥鸡蛋的故事 <格列佛游记>中记载了两个征战的强国,你不会想到的是,他们打仗竟然和剥鸡蛋的姿势有关. 很多人认为,剥鸡蛋时应该打破鸡蛋较大的一端,这群人被称作“大端(Big endian) ...

  10. Python基础-入门之路PYTHON-包 相对导入&绝对导入

    什么是包 包也是一种模块,但本质上就是一个文件夹 对于使用者而言 使用方式和模块没有任何区别 本质上就是一个文件夹 不同之处在于 多了一个__init__.py 叫包的初始化文件 import导入模块 ...