<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./alert.js"></script>
<style>
.alert-pormpt{//自定义提示框样式
background:rgba(0,0,0,0.8);
color:#fff;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
{
display: block;
z-index: 99999;
left: 50%;
top: 100px;
position: absolute;
padding: 20px;
border-radius: 5px;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
</style>
<button type="button" class="btn" onclick="test('alert-success')">成功</button>
<script>
/**
* 弹出式提示框，默认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) ? 2000 : time;
$('<div id="promptModal">')
.appendTo('body')
.addClass('alert '+ style)
.css({"display":"block","z-index":99999,"left":"50%","top":"50%","margin":"-25px 0 0 -50px","position": "absolute","padding": "20px","border-radius": "5px"})
.html(message)
.show()
.delay(time)
.fadeOut(10,function(){
$('#promptModal').remove();
});
};
// 成功提示
var success_prompt = function(message, time)
{
prompt(message, 'alert-success', time);
};
function test(str){
switch(str){
case "alert-success": success_prompt("更新成功");break;
}
}
</script>

js提示框触发和定时关闭的更多相关文章

  1. 【js+jquery】通用、简单的JS 提示框

    1.该插件不需要依赖 jquery,仅仅使用了原生js 2.简单.通用.可自定义修改样式.支持等待N秒消失.支持消失后跳转其他url , 功能还是比较完善的. 3.不废话,上代码: (我存放的位置在 ...

  2. 弹出JS提示框

    弹出JS提示框Page.ClientScript.RegisterStartupScript(typeof(string), "msg", "<script> ...

  3. js 提示框的实现---组件开发之（一）

    自己做了一个简单的提示框,供自己使用,也可以供他人参考,看懂此文,是理解组件开发的入门 思路比较简单: 1.常规写法: 1.1. 创建一个构造函数 1.2. 给构造函数的原型对象添加show 和hid ...

  4. JS 提示框 alert()、confirm()、prompt()的三者的区别

    使用消息框 使用警告.提示和确认 可以使用警告.确认和提示消息框来获得用户的输入.这些消息框是 window 对象的接口方法.由于 window 对象位于对象层次的顶层,因此实际应用中不必使用这些消息 ...

  5. js 提示框的实现---组件开发之（二）

    接着第上一个,在js文件里再增加一个 popModal 模块,实现弹框效果 css 代码: .alert { padding: 15px; margin-bottom: 20px; border: 1 ...

  6. 简单的js提示框,仅仅用jq和css就可以

    首先定义一个盒子 1 .pop { 2 position: fixed; 3 top: 20%; 4 left: 50%; 5 transform: translate(-50%); 6 width: ...

  7. JS添加MD5，JS提示框

    http://pan.baidu.com/s/1kTmSp9t

  8. Js提示框

    百度搜索 1.artDialog 2.ymPrompt 以下网站提供资料参考 http://www.17sucai.com/ http://www.juheweb.com/ http://www.5i ...

  9. 点击HTML页面问号出现提示框

    本demo的功能:点击页面按钮在其边缘出现提示信息,点击页面任何一处则消失. 如下图: 1.所需插件: jquery插件: layer插件: 2.HTML内容: ==注意==: class=" ...

  10. Echarts数据可视化tooltip提示框，开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

随机推荐

  1. 【敏捷研发系列】前端DevOps流水线实践

    作者:胡骏 一.背景现状 软件开发从传统的瀑布流方式到敏捷开发,将软件交付过程中开发和测试形成快速的迭代交付,但在软件交付客户之前或者使用过程中,还包括集成.部署.运维等环节需要进一步优化交付效率.因 ...

  2. m3u8文件后缀jpg,png等处理方法及视频合并

    处理 # 解析伪装成png的ts def resolve_ts(src_path, dst_path): ''' 如果m3u8返回的ts文件地址为 https://p1.eckwai.com/ufil ...

  3. Spring IOC官方文档学习笔记（三）之依赖项

    1.依赖注入 (1) 依赖注入(DI)的概念:某个bean的依赖项,由容器来负责注入维护,而非我们自己手动去维护,以此来达到bean之间解耦的目的,如下 //情况一:不使用依赖注入 public cl ...

  4. 说一下三种jar包在Linux的启动方式

    最近在linux上发布了一个SpringBoot项目,研究了一下jar包在Linux上的集中启动方式,特在此分享一下. 这里默认要启动的jar包为demo-0.0.1-SNAPSHOT.jar 第一种 ...

  5. 【3.x合批亲测】使用这个优化方案，iPhone6也能飞起来，直接拉满60帧！

    大家好,我是晓衡! 上周我花了3天的时间,体验测试了一款 Creator 3.x 性能优化工具:98K动态分层合批. 它能将 DrawCall 超过 1000+ 次的 2D 界面,实现运行时节点分层排 ...

  6. 刷题笔记——1267.A+B Problem

    题目 1267.A+B Problem 代码 while True: try: a,b=map(int,input().strip().split()) print(a+b) except: brea ...

  7. JavaScript 检查(Linting)工具的比较

    一个好的检查(linting)工具可以确保一个项目遵循编码规范. 让我们来看看四种流行替代方案的特性和优缺点:JSLint , JSHint , JSCS 和 ESLint . JSLint JSLi ...

  8. docker配置阿里云加速

    登录阿里云找到镜像加速 搜索容器镜像服务,进入管理控制台 找到镜像加速器,根据下面配置好即可 centos7.7x64例子 sudo mkdir -p /etc/docker sudo tee /et ...

  9. C#如何提高代码质量（二）

    多线程,异步,任务和并行 1.异步和多线程应用场景区分 多线程 计算密集型工作 异步 IO密集型工作 2.线城同步中使用信号量 EventWaitHandle AutoResetEvent Manua ...

  10. Task记录3 :ContinueWith ,CancellationToken,的结合

    static void Main(string[] args) { //1.创建取消令牌数据 CancellationTokenSource tokenSource = new Cancellatio ...