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开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进 ...
随机推荐
- em与当前元素的不解之缘
em是相对于当前元素的字体大小而言,比如font-size:14px;那么这个元素的1em=14px. 如果当前元素未定义字体大小,则会向上继承父元素的字体大小,如果当前元素的所有祖先元素都没有定义f ...
- node源码详解（五）
本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource5 本博客同步在https://cnodejs.o ...
- Git 基础教程 之 版本回退
不断对文件进行修改,然后不断提交修改到版本库里. 当你觉得文件修改到一定程度时,可以保存一个“快照”,这个“快照”在Git中称为“commit”. 一旦文件被改乱了.误删了,都可以从最近一个“comm ...
- 10.IDEAD 的xml中配置DTD
此时发现最后一行已经变成绿色就说明可以了,有提示了
- numpy中sum（axis=0）和axis=1的计算原理
看起来挺简单的样子,但是在给sum函数中加入参数.sum(a,axis=0)或者是.sum(axis=1) 就有点不解了 在我实验以后发现 我们平时用的sum应该是默认的axis=0 就是普通的相加 ...
- wordpress常见问题
一.WordPress新手必须注意的两个设置 第一 :设置里面的媒体--关闭wordpress缩略图功能如果开启了三种缩略图,博客上传的图片就会生成不同大小的三份,而基本上博客又没有使用,这样下来严重 ...
- ACDream - Dynamic Inversions II
先上题目: A - Dynamic Inversions II Time Limit: 6000/3000MS (Java/Others) Memory Limit: 128000/64000KB ( ...
- sendfile学习
参考 https://zhuanlan.zhihu.com/p/20768200?refer=auxten 而成本很多时候的体现就是对计算资源的消耗,其中最重要的一个资源就是CPU资源. Sendfi ...
- [React] Update State Based on Props using the Lifecycle Hook getDerivedStateFromProps in React16.3
getDerivedStateFromProps is lifecycle hook introduced with React 16.3 and intended as a replacement ...
- Create and Call HttpHandler in SharePoint
Create and Call HttpHandler in SharePoint Requirement: 1. Create a httphandler, and reture json data ...