<!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. Chaos 测试下的若干 NebulaGraph Raft 问题分析

    Raft 是一种广泛使用的分布式共识算法.NebulaGraph 底层采用 Raft 算法实现 metad 和 storaged 的分布式功能.Raft 算法使 NebulaGraph 中的 meta ...

  2. MySQL5.7兼容5.6

    MySQL5.7兼容5.6配置----MySQL5.7以上版本数据库兼容MySQL5.5-5.6版本数据库 手动安装MySQL 8.0/5.7 需要修改配置兼容 ,修改后需要重启mysql服务 (建议 ...

  3. plsql developer切换用户

    方法1: 1.双击plsql developer桌面软件图标启动软件 2.在连接窗口中填写连接信息,连接数据库 3.在新建窗口下拉选项中,选择命令窗口功能 4.在工作区内会出现当前用户连接数据库的窗口 ...

  4. Django(2) - Django模板

    1.Django模板介绍 基础概念 模板是具有一定的格式或骨架,可以动态的生成HTML 模板引擎决定以何种方式组织代码 一个项目可以有一个或者是多个模板引擎,Django里面主要两个模板引擎:DTL. ...

  5. [OpenCV实战]20 使用OpenCV实现基于增强相关系数最大化的图像对齐

    目录 1 背景 1.1 彩色摄影的一个简短而不完整的历史 1.2 OpenCV中的运动模型 2 使用增强相关系数最大化(ECC)的图像对齐 2.1 findTransformECC在OpenCV中的示 ...

  6. [机器学习] Yellowbrick使用笔记4-目标可视化

    目标可视化工具专门用于直观地描述用于监督建模的因变量,通常称为y目标. 代码下载 当前实现了以下可视化: 平衡箱可视化Balanced Binning:生成带有垂直线的直方图,垂直线显示推荐值点,以将 ...

  7. SOFAJRaft源码阅读-Netty时间轮算法的实践

    SOFAJRaft的定时任务调度器是基于Netty来实现的,所以本文将会基于Netty时间轮算法,然后再结合SOFAJRaft源码进行分析. @Author:Akai-yuan @更新时间:2023/ ...

  8. 前端基础知识-react（一）个人学习记录 _

    待补充 reactive和ref

  9. 【分析笔记】SiliconLabs EFR32BG22 Bluetooth Mesh SensorClient 源码分析

    硬件环境: SLTB010A(BRD4184A Rev A02 / EFR32BG22C224F512IM40) 软件环境: SimplicityStudio5/gecko_sdk_3.2.3 分析工 ...

  10. 12月9日内容总结——静态文件以及配置、form表单属性的作用、request对象、python连接数据库和Django连接数据库、ORM的基础知识介绍

    目录 一.静态文件 1.静态文件概念 2.资源访问 3.静态文件资源访问 二.静态文件相关配置 1.接口前缀 2.接口前缀动态匹配 三.form表单 action属性 method属性 四.reque ...