<!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. Qt从实习到搬砖

    Qt C++ 工具箱 从零开始的Qt开发之路 里面大概会写一些和Qt相关的内容,也不说是从0开始,感觉Qt做东西和用 C#也差不了很多?也许吧,总之慢慢来,一步一个脚印,直到给它拿下. 2022.5. ...

  2. day03-功能实现02

    家居网购项目实现02 5.功能04-会员登录 5.1需求分析/图解 需求如图: 输入用户名.密码后提交 判断该用户是否存在 如果存在,显示登录成功页面 否则返回登录页面,要求重新登录 要求改进登录密码 ...

  3. 更改jenkins插件地址为国内源地址

    1.在插件管理里替换源地址 在这个界面往下拉,可看到URL地址,将其替换为:https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-ce ...

  4. vivo 云原生容器探索和落地实践

    作者:vivo 互联网容器团队- Pan Liangbiao 本文根据潘良彪老师在"2022 vivo开发者大会"现场演讲内容整理而成.公众号回复[2022 VDC]获取互联网技术 ...

  5. 零基础入门 Java 后端开发，有哪些值得看的视频?

    目前网络上充满了大量的 Java 视频教程,然而内容却鱼龙混杂,为了防止小伙伴们踩坑,一枫结合自己的学习经验,向大家推荐一些不错的学习资源. 作为一名非科班转码选手,可以说,我是在哔哩哔哩上的研究生! ...

  6. JavaScript：操作符：赋值运算符和空赋值(??=)

    =号是赋值运算,即返回符号右边的结果,同时将结果赋值给符号左边的变量,考虑下面代码的运行结果: 赋值运算b = 1 + 1,做了两件事,先返回符号右边的结果,即2,这个2将参与a = 1 + 2的计算 ...

  7. Redis数据结构与对象

    参考<Redis设计与实现> 系列文章目录和关于我 一丶简单动态字符串 当redis需要的不仅仅是一个字符串字面量,而是一个可以被修改的字符串值时,就会使用SDS(simple dynam ...

  8. [常用工具] Python视频处理库VidGear使用指北

    VidGear是一个高性能的Python视频处理库,它在预载多个专业视频图像处理库的基础上,如OpenCV.FFmpeg.ZeroMQ.picamera.starlette.yt_dlp.pyscre ...

  9. .gitignore文件配置以及gitee提交报Push rejected...错误解决

    .gitignore文件配置 .gitignore 文件可以用来忽略被指定的文件或文件夹的改动.记录在.gitignore文件里的文件或文件夹是不会被 git 跟踪到,也就是被忽略的文件是不会被上传到 ...

  10. LCA学习笔记（原洛谷文章）

    本文原发布时间:\(\texttt{2022-05-21 14:11:52}\) 简介 最经公共祖先 \(\operatorname{LCA}(a,b)=c\),指的是在一棵树上节点 \(a\) 与 ...