在实际项目中，很容易有这种需求：当某个操作成功或失败，需要给用户一个提示。当然最简单的做法是调用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. Python语言简介

    一.Python语言发展史 1989年吉多·范罗苏姆(Guido van Rossum)中文外号“龟叔”,圣诞节期间开始编写Python语言的编译器. Python这个名字,来自Guido所挚爱的电视 ...

  2. Git 基础教程 之 远程仓库

    ①   注册GitHub账号 由于本地Git仓库和GitHub仓库之间的传输是SSH加密的,所以需要一点设置: a, 创建SSH Key         在用户主目录下,看是否有 .ssh 目录,若无 ...

  3. 3.Linux 系统目录结构

    Linux 系统目录结构 登录系统后,在当前命令窗口下输入命令可以查看我们系统的默认文件列表:  ls /  你会看到如下图所示: 树状目录结构: 以下是对这些目录的解释: /bin:bin是Bina ...

  4. tp5 异常处理

    === <?php/** * Created by PhpStorm. * User: 14155 * Date: 2018/11/10 * Time: 0:26 */ namespace ap ...

  5. 【hihocoder 1329】 平衡树·Splay(set做法)

    [题目链接]:http://hihocoder.com/problemset/problem/1329 [题意] [题解] 因为一开始是空的树,所以; n其实就代表了树中的最多元素个数; 则最坏的情况 ...

  6. [bzoj3943][Usaco2015 Feb]SuperBull_Kruskal

    SuperBull bzoj-3943 Usaco-2015 Feb 题目大意:贝西和她的朋友们在参加一年一度的“犇”(足)球锦标赛.FJ的任务是让这场锦标赛尽可能地好看.一共有N支球队参加这场比赛, ...

  7. mysql 易错误理解

    MySQL作为数据库的一大主力军,到处存在于我们各种系统中,相信大家都不陌生!但是,你知道你能用不代表你知道细节,那我们就来盘点盘点其中一些我们平时不太注意的地方,一来为了有趣,二来为了不让自己踩坑. ...

  8. HDU 5176

    这道题以前好像在哪遇到过. 注意树的每一条边都是桥,所以,桥两端的点要到达对方是必须通过这条边的.于是,可以把边由小到大排序,利用并查集,这样,每加一条边就连通了一部分,而随着权值的增大,必定是桥两端 ...

  9. 先序遍历创建二叉树,对二叉树统计叶子节点个数和统计深度（创建二叉树时#代表空树,序列不能有误）c语言

    #include "stdio.h" #include "string.h" #include "malloc.h" #define NUL ...

  10. org.openqa.selenium.NoSuchElementException:

    http://www.blogjava.net/qileilove/archive/2014/12/11/421309.html selenium webdriver定位不到元素的五种原因及解决办法 ...