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. LeetCode one Two Sum

    LeetCode one Two Sum (JAVA) 简介:给定一个数组和目标值,寻找数组中符合求和条件的两个数. 问题详解: 给定一个数据类型为int的数组,一个数据类型为int的目标值targe ...

  2. P4001 [ICPC-Beijing 2006]狼抓兔子

    题目地址:P4001 [ICPC-Beijing 2006]狼抓兔子 平面图 边与边只在顶点相交的图. 对偶图 对于一个平面图,都有其对应的对偶图. 平面图被划分出的每一个区域当作对偶图的一个点: 平 ...

  3. 【转】数据库介绍（MySQL安装 体系结构、基本管理）

    [转]数据库介绍(MySQL安装 体系结构.基本管理) 第1章 数据库介绍及mysql安装 1.1 数据库简介 数据库,简而言之可视为电子化的文件柜——存储电子文件的处所,用户可以对文件中的数据运行新 ...

  4. 817. Linked List Components

    1. 原始题目 We are given head, the head node of a linked list containing unique integer values. We are a ...

  5. vue之router钩子函数

    模块一:全局导航钩子函数 1.vue router.beforeEach(全局前置守卫) beforeEach的钩子函数,它是一个全局的before 钩子函数, (before each)意思是在 每 ...

  6. 判断鼠标进入容器的方向小Demo

    参考资料: 贤心博客:http://sentsin.com/web/112.html, Math.atan2(y,x) 解释 :http://www.w3school.com.cn/jsref/jsr ...

  7. 关于centos7和centos6中平滑升级nginx到新版本v1.12.1修复nginx最新漏洞CVE-2017-7529的解决方案

    关于centos7和centos6中平滑升级nginx到新版本v1.12.1修复CVE-2017-7529漏洞的解决方案 漏洞描述 2017年7月11日,Nginx官方发布最新的安全公告,在Nginx ...

  8. MariaDB主从备份记录

    一.预期效果: 环境: centos 6.5   mariadb 10.0.14 (mysql -V) 主服务器:192.168.5.206   从服务器:192.168.5.207   主服务器数据 ...

  9. FreeSWITCH voicemail

    功能描述:分机不存在时,进行语音留言. 步骤: 1.编译mod_voicemail 模块.默认是已经有编译 2.加载mod_voicemail模块: fs_cli  -->  reload mo ...

  10. python学习第11天 迭代器

    函数的名称 闭包 迭代器 递归