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开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进 ...
随机推荐
- 编译安装PHP7及扩展
一.编译安装PHP 1. 下载源码包并解压 源码包地址:http://php.net/downloads.php 下载源码包 当前PHP最新本门是7.2.9,下载 php-7.2.9 源码包 wget ...
- 0320SQL中的where条件，在数据库中提取与应用浅析
转自 何登成的技术博客 追求技术的道路上,10年如一日 首页 关于我 RSS 订阅 © 2012-2017 何登成的技术博客 SQL中的where条件,在数据库中提取与应用浅析 3月 3r ...
- qsort快速排序
C库函数qsort七种使用方法示例 七种qsort排序方法<本文中排序都是采用的从小到大排序> 一.对int类型数组排序C++ / C 代码 int num[100]; Sample: i ...
- ul,li不能左右居中的问题
近期帮朋友做一个他们公司的商品站点,用到了曾经学到的html+css技术,当然做站点少不了Javascript和jquery这些..... 这个功能主要实现了导航条里面的条目是居中的.所以声明了ul, ...
- SUSAN算子
- 记忆化搜索 hdu 1331
Function Run Fun Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- ArcGIS Python实现Modis NDVI批量化月最大合成
最大合成法(MVC)能够在Envi中的Band Math中进行,式子是B1>B2,可是无法批量化.本文实如今ArcGIS中利用Python代码批量进行,例如以下: 用到的Modis NDVI数据 ...
- YII用户注冊和用户登录（三）之模型中规则制定和分析
3 模型中规则制定和分析 YII模型主要分为两类,一个数据模型,处理和数据库相关的增删改查.继承CActiveRecord.还有一个是表单模型,继承CFormModel.不与数据库进行交互.操作与数据 ...
- Visual C++ RunTime的特征——非烫即屯
Visual C++ RunTime的特征——非烫即屯 大一刚学C语言,第二次上机课,当我发现我照着书抄写的程序在运行之外的黑框里面跳出一排“烫烫烫烫烫”,当时就震惊了.你们能想象一个来自小城,在大学 ...
- 【Codeforces 258B】 Sort the Array
[题目链接] http://codeforces.com/contest/451/problem/B [算法] 模拟 在序列中找到一段单调递增的子序列,将这段序列反转,然后判断序列是否变得单调递增,即 ...