1秒消失 alert jquery_jquery 弹窗信息显示几秒后自动消失
CSS 样式:<br></br>
alert {
display: none;
position: fixed;
top: 50%;
left: 50%;
min-width: 300px;
max-width: 600px;
transform: translate(-50%,-50%);
z-index: 99999;
text-align: center;
padding: 15px;
border-radius: 3px;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}<br></br><br></br>
首先,加载JQuery,然后用下面代码实现1.5秒后淡出效果:
$('.alert').html('操作成功').addClass('alert-success').show().delay(1500).fadeOut();
如果不想在HTML中加DIV,可以直接用JS把DIV添加到页面中,如下:
$('<div>').appendTo('body').addClass('alert alert-success').html('操作成功').show().delay(1500).fadeOut();
一般情况下,如果这个方式使用得很频繁,写成函数可以提高复用:
/**
* 弹出式提示框,默认1.2秒自动消失
* @param message 提示信息
* @param style 提示样式,有alert-success、alert-danger、alert-warning、alert-info
* @param time 消失时间
*/
var prompt = function (message, style, time)
{
style = (style === undefined) ? 'alert-success' : style;
time = (time === undefined) ? 1200 : time;
$('<div>')
.appendTo('body')
.addClass('alert ' + style)
.html(message)
.show()
.delay(time)
.fadeOut();
};
// 成功提示
var success_prompt = function(message, time)
{
prompt(message, 'alert-success', time);
};
// 失败提示
var fail_prompt = function(message, time)
{
prompt(message, 'alert-danger', time);
};
// 提醒
var warning_prompt = function(message, time)
{
prompt(message, 'alert-warning', time);
};
// 信息提示
var info_prompt = function(message, time)
{
prompt(message, 'alert-info', time);
};
1秒消失 alert jquery_jquery 弹窗信息显示几秒后自动消失相关推荐
- 一.关于实现浏览器弹窗提示内容几秒后自动消失重定向执行其他函数的两种方法
一.关于实现浏览器弹窗提示内容几秒后自动消失重定向执行其他函数的两种方法 第一种方法–向body动态写入div标签调用css效果显示: (新建***.jsp放在WebContent根目录下直接访问ip ...
- qt弹出框自动消失的悬浮提示框_QT【简单自定义弹出提示框】:非模态,数秒后自动消失...
目标效果:一个提示信息框,创建后显示提示信息,一定时间后自动消失,不阻塞原来窗口. 思路: 自定义一个控件,继承自QWidget,构造时设置定时器,时间到则自我销毁. ### 实现代码 代码一共两个文 ...
- 网页弹出提示框3秒后自动消失
页面弹出提示框3秒后自动消失 <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
- Axure实现提示文本单击显示后自动消失的效果
Axure实现提示文本单击显示后自动消失的效果 方法/步骤 如图所示,框出的部分为提示文本(已经命名为tooltip),希望达到的效果是默认加载时不显示,点击帮助图标后显示,且2秒后自动消失. 首先在 ...
- 悬挂式Notification 停留几秒后自动消失 且保留状态栏的通知(自定义消息)
思路:通知目前有三种 普通通知 折叠式通知 悬挂式通知 我现在想让app弹出悬挂式通知 ,醒目些,通知自动消失或手动划除后,下滑状态栏我还想看到通知: 只用普通的通知,只能在状态栏提示,提示不够明显 ...
- iOS 疑难杂症— — 收到推送显示后自动消失的问题
声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民伯伯: http://over140.cnblogs.com 问题 正在支持 Remote Noti ...
- html中alert弹窗自动消失,模拟alert2秒后自动消失弹出框
//显示框信息 function showMsg(val,time){ if(!document.getElementById('parent_pop_up')){ var parent_pop_up ...
- 微软发布视频消息应用Qik:42秒录制、两周后自动消失
北京时间10月15日消息,据美国科技网站TheNextWeb报道,日前,微软的Skype部门推出了新应用Skype Qik ,这是一个整合入Skpye中的视频通讯应用,让用户之间分享视频短片. Sky ...
- android弹窗自动消失,Android点击popupwindow以外区域 popupwindow自动消失(转载)
方法一(这种方法可以处理popupwindows dimiss的时候一些其他的操作,比如让其他控件的隐藏,消失等): 代码如下popupWindow.setFocusable(false);//foc ...
最新文章
- React事件处理函数传参问题
- DEVICE_ATTR实例分析
- 面试问Kafka,这一篇全搞定
- PHP返回数据json数据样式要求是对象{},而不是[]
- 英国如何推动分享经济的发展?
- 使用Scala实现Java项目的单词计数:串行及Actor版本
- 发明喂饭机器人_人类又懒出新高度,老美发明自动喂饭机器人,“君子”动嘴不动手...
- 02-第二章 基本类型
- 【Kafka】Error when freeing index buffer (kafka.log.OffsetIndex) NullPointException
- l2-004 这是二叉搜索树吗?_MySQL索引为何选择B+树
- (转)pycharm快捷键
- CV学习笔记-图像滤波器
- Exadata中最有用的功能-存储索引
- 翻译spring4.2官方文档(3)
- 线程间的同步和通信机制
- mysql join 去重_对mysql left join 出现的重复结果去重
- 在Android上实现汉字笔顺动画效果
- 小米路由器3无线网连接到服务器,小米路由器3怎么连接硬盘
- 多个无线 AP 怎么实现无缝漫游?
- 防止多次触发click事件