Jquery插件：提示框
在实际项目中，很容易有这种需求：当某个操作成功或失败，需要给用户一个提示。当然最简单的做法是调用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插件：提示框的更多相关文章
- 基于jQuery消息提示框插件Tipso
今天要分享的这款jQuery消息提示框插件名叫Tipso,它的特点是可以定义提示框的显示位置,以及动态改变提示框的提示内容,应该说是一款相当灵活的jQuery消息提示框插件.效果图如下: 在线预览 ...
- 基于jquery的提示框JavaScript 插件，类Bootstrap
目录 基于jquery的提示框JavaScript 插件,类Bootstrap 基于jquery的提示框JavaScript 插件,类Bootstrap 源码 github地址: https://gi ...
- Highchar.js插件提示框千分位显示为空格而不是逗号 --（2018 08/06-08/12周总结）
1.Oracle在已经存在主键的表中插入复合主键的SQL语句 如已有一个表test_key,其中a1列为主键. CREATE TABLE TEST_KEY( A1 VARCHAR2(3) NOT NU ...
- jQuery EasyUI 提示框(Messager)用法
jQuery EasyUI 提示框(Messager)不仅强大,而且也不用任何的HTML代码,只需要按照<jQuery EasyUI框架使用文档>包含必要文件后,在$(function() ...
- Jquery toastr提示框
toastr是一个基于JQuery的消息提示插件; 1. 下载toastr和jquery https://jquery.com/download/ https://codeseven.github.i ...
- jquery消息提示框
用于ajax类型提示的,只显示一个. 只是给个思路而已,代码有很多不足. 4个参数,有2个是可选 调用 $.mTip('类型','显示内容',显示时间,回调函数) 类型: 0 为加载 1 为成功 2 ...
- 关闭是否只查看安全传送的网页内容提示框 和 是否允许运行软件，如ActiveX控件和插件提示框
关闭是否只查看安全传送的网页内容提示框 最新编写 爬虫程序,运行程序后,电脑就总是出现下面这个提示框,一遍遍点"是"或"否"繁琐又麻烦.我看得有点不耐烦了.于是 ...
- jQuery消息提示框插件Tipso
在线演示 本地下载
- jQuery easyui 提示框
1:弹出提示窗的使用 (1)屏幕右下弹出提示窗口: $.messager.show({ title:'My Title', msg:'Message will be closed after 4 se ...
- 基于Metronic的Bootstrap开发框架经验总结（6）--对话框及提示框的处理和优化
在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进 ...
随机推荐
- python-flask-1
https://askubuntu.com/questions/244641/how-to-set-up-and-use-a-virtual-python-environment-in-ubuntu ...
- touch：命令创建文件
touch:创建空文件或改变文件的时间戳属性 [功能说明] touch命令有两个功能:一是创建新的空文件:二是改变已有文件的时间戳属性 [语法格式] touch [option] [file] tou ...
- Educational Codeforces Round 35 B/C/D
B. Two Cakes 传送门:http://codeforces.com/contest/911/problem/B 本题是一个数学问题. 有a个Ⅰ类球,b个Ⅱ类球:有n个盒子.将球放入盒子中,要 ...
- 关于Hanoi算法
java经典算法——河内算法(Hanoi) 有三根相邻的柱子,标号为A,B,C,A柱子上从下到上按金字塔状叠放着n个不同大小的圆盘,要把所有盘子一个一个移动到柱子B上,并且每次移动同一根柱子上都不能出 ...
- plsql developer ini
plsql developer ini [Colors] GradientEnabled=True VerticalGradient=True DefaultGradient=True Gradien ...
- 使用Android Studio 1.3 版本号进行NDK开发
众所周知Android Studio 1.3 版本号新增了NDK支持,能够非常方便的在上面开发C++或者C代码了,但是预览版功能不是非常完好,须要非常多步骤,另一些奇怪的BUG,整了半天最终能够使用A ...
- Python 远程调用MetaSploit
(1)安装Python的msgpack类库.MSF官方文档中的数据序列化标准就是參照msgpack. root@kali:~# apt-get install python-setuptools ro ...
- HDU 2717
Catch That Cow Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) T ...
- Huffman编码实现压缩解压缩
这是我们的课程中布置的作业.找一些资料将作业完毕,顺便将其写到博客,以后看起来也方便. 原理介绍 什么是Huffman压缩 Huffman( 哈夫曼 ) 算法在上世纪五十年代初提出来了,它是一种无损压 ...
- TF-IDF算法--关键词句和文本集中每篇文章相关度计算
关键词句和文本集每篇文章相关度计算:假设语料库中有几万篇文章,每篇文章的长度不一,你任意输入关键词或句子,通过代码以tf-idf值为准检索出来相似度高的文章. 1.TF-IDF概述 TF-IDF是一种 ...