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开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进 ...
随机推荐
- 【4】Django 创建第一个模块应用
大成若缺,其用不弊.大盈若冲,其用不穷.大直若屈.大巧若拙.大辩若讷.静胜躁,寒胜热.清静为天下正 --老子<道德经> 本章内容 创建应用(app) 开发第一个视图(View) URL访问 ...
- 洛谷——P1095 守望者的逃离
https://www.luogu.org/problem/show?pid=1095#sub 题目描述 恶魔猎手尤迪安野心勃勃,他背叛了暗夜精灵,率领深藏在海底的娜迦族企图叛变.守望者在与尤迪安的交 ...
- 洛谷 P2534 [AHOI2012]铁盘整理
P2534 [AHOI2012]铁盘整理 题目描述 输入输出格式 输入格式: 共两行.第一行为铁盘个数N(1<=N<=50),第二行为N个不同的正整数,分别为从上到下的铁盘的半径R.(1& ...
- BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第1章节--SharePoint 2013 介绍 SharePoint 2013 平台
BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第1章节--SharePoint 2013 介绍 SharePoint 2013 平台 SharePoin ...
- <LeetCode OJ> 31. Next Permutation
31. Next Permutation Total Accepted: 54346 Total Submissions: 212155 Difficulty: Medium Implement ne ...
- oralce sql 创建指定时间段内的日历信息
-- Create table create table TEMP_CALENDAR ( MONTH VARCHAR2(6), W_7 VARCHAR2(2), W_1 VARCH ...
- Linux 管道是什么 ？原理
简单点就是说,一个命令的结果作为另外一个命令(结果)的输入 . 管道是linux提供的一种常见的进程通信工具,也是很多shell命令能够灵活组合产生强大用途的一个重要工具. 管道是什么? 管道,顾名思 ...
- Android利用Intent与其它应用交互
前言: 上一篇博客给大家聊了Intent的定义.分类.属性和功能,相信大家对于Intent在Android中的作用已经清楚,这一篇博客将会给大家聊Intent的使用方法. Android系统的一个重要 ...
- Swift - 将String类型的数字转换成数字类型（支持十进制、十六进制）
1,十进制的字符串转成数字 Swift中,如果要把字符串转换成数字类型(比如整型,浮点型等).可以先转成NSString类型,让后再转. 1 2 3 4 //将文本框中的值转换成数字 var i = ...
- Javascript技巧之不要用for in语句对数组进行遍历
一,为什么不要用for in语句 jqModal这个jquery插件估计很多人都使用过,在jqModal源码内部,有一个函数为hs,其中有个嵌套循环如下, for(var i in {jqmShow: ...