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

    Firefly教程网站:http://wiki.t-firefly.com/zh_CN/Firefly-RK3399/started.html 系统烧录: http://wiki.t-firefly. ...

  2. Pycharm中Git、Github的简单使用和配置

    Pycharm中Git.Github的使用 PyCharm本身自带了git,稍微配置一下就可以很好的在图形界面下进行Python项目的版本控制 配置Git 在配置前先新建一个项目,当然也可以打开已有的 ...

  3. 1、springboot+mybatis+zookeeper+dubbox+maven+pagehelper

    一.创建普通的maven的web项目 2.配置KD42WF_Part1下的pom.xml <?xml version="1.0" encoding="UTF-8&q ...

  4. 阿里云对象存储服务，OSS使用经验总结，图片存储，分页查询

    阿里云OSS-使用经验总结,存储,账号-权限,分页,缩略图,账号切换 最近项目中,需要使用云存储,最后选择了阿里云-对象存储服务OSS.总的来说,比较简单,但是仍然遇到了几个问题,需要总结下. 1.O ...

  5. sqlalchemy带条件查询相关应用

    sqlalchemy带条件查询 filter_by与filter filter_by 与filter的区别: 1. filter_by只能取值= filter可以==,!=,>=,<=等多 ...

  6. 【ACM】poj_2210_Metric Time_201308011933

    Metric TimeTime Limit: 1000MS  Memory Limit: 65536K Total Submissions: 2550  Accepted: 783 Descripti ...

  7. ExpressionTreeVisualizer

    看表达式的工具,这个工具后来微软不更新了,只支持到VS2013 表达式树的语法难度太大,语法和实现难度都大 相关文章 github地址

  8. Arcengine设置坐标系

    转自原文 Arcengine设置坐标系 ArcGIS Engine提供了一系列对象供开发者管理GIS系统的坐标系统. 对大部分开发者而言了解ProjectedCoordinateSystem, Geo ...

  9. maven环境配置好，一直提示mvn不是内部命令

    设置了环境变量  M2_HOME  跟path  ,在cmd中输入mvn一直提示不是内部命令 解决办法:通过命令设置path 如下:set  path=输入值

  10. Android 删除新版安卓fragment_main.xml

    在新版本号的ADT中,创建androidproject时默认会产生两个xml文件--fragment_main和activity_main. 个人建议把fragment_main这个文件删除掉 1)将 ...