jQuery弹出提示信息自动消失简洁版
// 在bootstrap中可以,可以使用如下方式实现弹出提示信息自动消失,如果没有使用bootstrap框架,可以自定义样式 //tip是提示信息,type:'success'是成功信息,'danger'是失败信息,'info'是普通信息,'warning'是警告信息
function ShowTip(tip, type) {
var $tip = $('#tip');
if ($tip.length == 0) {
// 设置样式,也可以定义在css文件中
$tip = $('<span id="tip" style="position:fixed;top:50px;left: 50%;z-index:9999;height: 35px;padding: 0 20px;line-height: 35px;"></span>');
$('body').append($tip);
}
$tip.stop(true).prop('class', 'alert alert-' + type).text(tip).css('margin-left', -$tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500);
} function ShowMsg(msg) {
ShowTip(msg, 'info');
} function ShowSuccess(msg) {
ShowTip(msg, 'success');
} function ShowFailure(msg) {
ShowTip(msg, 'danger');
} function ShowWarn(msg, $focus, clear) {
ShowTip(msg, 'warning');
if ($focus) {
$focus.focus();
if (clear) $focus.val('');
}
return false;
}
效果图如下
3s后会自动消失,比原生的alert()体验更好
jQuery弹出提示信息自动消失简洁版的更多相关文章
- jQuery弹出提示信息简洁版(自动消失)
之前看了有一些现成的blockUI.Boxy.tipswindow等的jQuery弹出层插件,可是我的要求并不高,只需要在保存后弹出提示信息即可,至于复杂点的弹出层-可以编辑的,我是直接用bootst ...
- Jquery地图热点效果-鼠标经过弹出提示信息
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- jQuery弹出窗口完整代码
jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...
- 【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】【jQuery对class,id,type的操作】【jquery选择器】
1.如何使用jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨 ...
- Android N(7.0) 在ListView里显示EditText时软键盘弹出时会自动切换到全键盘的问题?
Android N(7.0) 在ListView里显示EditText时软键盘弹出时会自动切换到全键盘的问题? 问题症状描述 Activity 在AndroidManifest.xml里设置andro ...
- thinkPHP5.0使用form表单提交数据和删除文章,不用TP的提示页面,使用弹出提示信息
form表单提交数据和删除文章时,TP的默认信息提示页面的看起来不是很好看,想要实现弹窗提示怎么做呢? 前端:可以使用前端的一个知识--iframe,iframe元素会创建包含另外一个文档的内联框架: ...
- Bootstrap历练实例:弹出提示信息的样式按钮
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Vue使用 weui picker 弹出框不消失
前言 最近使用 weui 里面的 datepicker 组件的时候遇到了一个问题: 弹出来 选择年月日的框之后,直接点击导航上的“返回” 按钮,picker 选框不消失,也就是弹出框不消失 weui. ...
- jQuery弹出深色系层菜单
低调奢华jQuery弹出层菜单,使用新版的jQuery库,兼容多种浏览器.Demo展示: http://hovertree.com/texiao/layer/3/ 本特效可以作为网站的引导页,使用jQ ...
随机推荐
- Java开发笔记(一百一十一)POST方式的HTTP调用
前面介绍了GET方式的HTTP调用,该方式主要用于向服务器索取数据,不管是字符串形式的应答报文,还是二进制形式的网络文件,都属于服务器提供的信息.当然调用方也可以向服务地址传送请求参数,除了通过连接对 ...
- Java开发笔记(一百一十三)HttpClient实现下载与上传
前面介绍了通过HttpClient实现HTTP接口的GET方式调用和POST方式调用,那么文件下载与文件上传又该如何操作呢?其实在HttpClient看来,文件下载属于特殊的GET调用,只不过应答报文 ...
- Appium移动端自动化测试--使用IDE编辑并强化脚本
目录 Appium客户端安装 安装Python IDE-Pycharm Java IDE 安装 使用隐式等待让用例更稳定 隐式等待 启动Appium非GUI模式:Appium Server 安装Pyt ...
- pychram 中 Terminal 中 git log 中文乱码解决办法
添加环境变量 set LESSCHARSET=utf-8 执行以下命令 git config --global core.quotepath false 不成功执行以下命令 git config -- ...
- 深入Java中的位操作
「WTF系列」深入Java中的位操作 关于WTF系列 引 学完本章节你将学会位的基础概念与语法,并且还会一些骚操作!! 与.或.非.位移 原码.反码.补码 字节.位.超区间...... 开始本章节之前 ...
- 用不上索引的sql
1.使用不等于操作符(<>, !=) 大于可以.小于可以,between and 也可以 2.使用 is null 或 is not null 任何包含null值的列都将不会被包含在索引中 ...
- ZK中使用JS读取客户端txt文件内容问题
最近写一个需求时遇到一个问题,用户需要通过点击一个按钮直接读取他自己电脑上D盘的一个txt文件内容显示到页面,因为项目现在是用ZK写的.我对于ZK也是刚刚了解不就,很多都还不是很熟.起初我是想用io流 ...
- 阅读笔记---第三章 Xen信息页
1.文件/xen/include/public/xen.h 2.第一个数据结构:启动信息页strat_info,启动信息页是GuestOS内核启动时,由Xen映射到GusetOS内存空间的一个物理页面 ...
- Python学习笔记【1】
1.%r和%s的区别 (1)stackflow 上面的一个解答 (2) x = "There are %d types of people." %10 binary = " ...
- 卷积神经网络快速入门【基于TensorFlow】
一.概述 卷积神经网络[Convolutional neural networks]里面最重要的构建单元是卷积层.神经元在第一个卷积层不是连接输入图片的每一个像素,只是连接它们感受野1的像素,以此类推 ...