在实际项目中，很容易有这种需求：当某个操作成功或失败，需要给用户一个提示。当然最简单的做法是调用alert()方法弹窗。但alert()属于JavaScript中BOM部分，每个浏览器的样式不太一样，这个我们改变不了。另外，弹窗给用户的感觉也不是很好。还需要手动关闭一次。

鉴于以上的理由，自己实现个弹出提示很有必要。本文的实现是基于jquery的，是一款jquery插件，可以直接用，弹出后，定时消失。弹窗样式不符合需求的，可以修改的。

效果：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

.ui-poptips {

    width: 100%;

    position: fixed;

    top: 50%;

    left: 0;

    z-index: 10000;

    text-align: center;

}

.ui-poptips .ui-poptips-cnt {

    margin: 0 auto;

    padding: 4px 15px;

    background-color: rgba(102, 102, 102, .8);

    line-height: 36px;

    height: 36px;

    color: #fff;

    font-size: 15px;

    text-align: center;

    /*border-bottom-left-radius: 3px;*/

    /*border-bottom-right-radius: 3px;*/

    border-radius: 3px;

    overflow: hidden;

}

.ui-poptips-success i:before {

    background-position: -25px -50px

}

</style>

</head>

<body>

<div id="div1">点我</div>

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

//jquery插件代码，一般作为一个独立的文件引入。这里直接写了。

$.fn.tips=function(content){

    var tips=$(this);

    $(tips).append('<div class="ui-poptips ui-poptips-success am-animation-fade" > <span class="ui-poptips-cnt">'+content+'</span> </div>');

    setTimeout(function(){$("div.ui-poptips").remove();},3000);

}

</script>

<script>

	$('#div1').bind('click',function(){

		$('body').tips('div1被点击了');

		})

</script>

</body>

</html>

　　

Jquery插件：提示框的更多相关文章

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

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

  2. 基于jquery的提示框JavaScript 插件，类Bootstrap

    目录 基于jquery的提示框JavaScript 插件,类Bootstrap 基于jquery的提示框JavaScript 插件,类Bootstrap 源码 github地址: https://gi ...

  3. Highchar.js插件提示框千分位显示为空格而不是逗号 --（2018 08/06-08/12周总结）

    1.Oracle在已经存在主键的表中插入复合主键的SQL语句 如已有一个表test_key,其中a1列为主键. CREATE TABLE TEST_KEY( A1 VARCHAR2(3) NOT NU ...

  4. jQuery EasyUI 提示框(Messager)用法

    jQuery EasyUI 提示框(Messager)不仅强大,而且也不用任何的HTML代码,只需要按照<jQuery EasyUI框架使用文档>包含必要文件后,在$(function() ...

  5. Jquery toastr提示框

    toastr是一个基于JQuery的消息提示插件; 1. 下载toastr和jquery https://jquery.com/download/ https://codeseven.github.i ...

  6. jquery消息提示框

    用于ajax类型提示的,只显示一个. 只是给个思路而已,代码有很多不足. 4个参数,有2个是可选 调用 $.mTip('类型','显示内容',显示时间,回调函数) 类型: 0 为加载 1 为成功 2 ...

  7. 关闭是否只查看安全传送的网页内容提示框 和 是否允许运行软件，如ActiveX控件和插件提示框

    关闭是否只查看安全传送的网页内容提示框 最新编写 爬虫程序,运行程序后,电脑就总是出现下面这个提示框,一遍遍点"是"或"否"繁琐又麻烦.我看得有点不耐烦了.于是 ...

  8. jQuery消息提示框插件Tipso

    在线演示 本地下载

  9. jQuery easyui 提示框

    1:弹出提示窗的使用 (1)屏幕右下弹出提示窗口: $.messager.show({ title:'My Title', msg:'Message will be closed after 4 se ...

  10. 基于Metronic的Bootstrap开发框架经验总结（6）--对话框及提示框的处理和优化

    在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进 ...

随机推荐

  1. js中writeln()方法

    writeln( ) 方法与 write( ) 方法几乎一样,差别仅在于是前者将在所提供的任何字符串后添加一个换行符.在 HTML 中,这通常只会在后面产生一个空格:不过如果使用了 <PRE&g ...

  2. mysql连接错误，error1251解决方式

    解决此问题有两种方法,一种是更新navicat驱动来解决此问题,一种是将mysql用户登录的加密规则修改为mysql_native_password.本文采用第二种方式ALTER USER 'root ...

  3. RedisTemplate Api总结

    RedisTemplate 使用总结 最近在做一个项目,考虑到有累计,排行,缓存等功能:而Redis是一个基于内存的数据库,而且提供了 字符串(String), 哈希(Map), 列表(list), ...

  4. POJ 2008

    这道题,说实话,细节很多.不过,我没想到,光细节就能搞死人了... 参考了http://www.cppblog.com/varg-vikernes/archive/2010/03/12/109559. ...

  5. 一次SQLSERVER触发器编写感悟

    背景:BOSS须要我写一个工厂採集端到server端的数据同步触发器,数据库採用的是sqlserver2008 需求:将多台採集机的数据同步到server中,假设採集端数据库与server数据库连接失 ...

  6. Linux下安装JRE和Eclipse IDE for C/C++ Developers

    Linux32位,下载eclipse-cpp-luna-R-linux-gtk.tar.gz和jre-8u11-linux-i586.rpm  放到家文件夹中. http://www.eclipse. ...

  7. hdoj--1533--Going Home（最小费用流）

    Going Home Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tota ...

  8. 【HDU 1846】 Brave Game

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=1846 [算法] 巴什博弈 若有(m+1)个石子,显然先手不能直接取完,后手必胜 因此,我们可以把石 ...

  9. [JavaEE] Spring事务配置的五种方式

    前段时间对Spring的事务配置做了比较深入的研究,在此之间对Spring的事务配置虽说也配置过,但是一直没有一个清楚的认识.通过这次的学习发觉Spring的事务配置只要把思路理清,还是比较好掌握的. ...

  10. 两道人数多，课程少，query多的题

    #每天进步一点点# 来两道很相似的题目~ (智商啊智商.....) hihoCoder #1236:Scores (简单的分桶法+bitset) 2015 Beijing Online的最后一题.题目 ...