<!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. LeetCode HOT 100：在排序数组中查找元素的第一个和最后一个位置

    题目:34. 在排序数组中查找元素的第一个和最后一个位置 题目描述: 给你一个递增数组,和一个目标值target,最终返回数组中第一次出现target和最后一次出现target的下标.如果该数组中没有 ...

  2. 2021 & 2022年终回顾：山河无恙，烟火寻常

    前言 又到了一年一度年终回顾的时候了,回想起去年年底圣诞节的时候由于忙着参加黑客松大赛,一下子就进入了新的一年,失去了年终回顾的动力,所以今年提前两个月开始进行回顾,这样的话今年最后一天就可以顺利发文 ...

  3. [Leetcode]寻找峰值

    题目 思路 如果常规解法不考虑时间复杂度,直接遍历即可得到峰值,时间复杂度为O(n),题目要求O(logn),因此我们需要使用二分法. 首先考虑题目要求:nums[-1]=nums[n]=-∞,因此在 ...

  4. 杂项 NOI2020 打铁记

    杂项 NOI2020 打铁记 day -一个月 他一个月前,期末考试刚刚结束,开始了NOI2020的冲刺.虽然时间并不充足,但一想到一个月后能站在国赛的赛场上,与来自全国的高手们一较高下,他充满了干劲 ...

  5. doc指令

    ## 打开doc指令方法 1. 开始菜单 --所有应用--Windows系统--命令提示符 2. win+r 输入cmd 3. 桌面文件夹下面按住shift+右键选择在此处打开窗口 4. 文件导航栏路 ...

  6. 反馈电路的Bode分析法

    1 前言 在反馈电路的分析中,如果前向放大倍数为Aopen,反馈系数为β,则闭环传递函数Aclose=Aopen/(1+Aopenβ),其中Aopenβ为环路增益.但是,在Aopen和β的计算中均要考 ...

  7. Longhorn+K8S+KubeSphere云端数据管理，实战 Sentry PostgreSQL 数据卷增量快照/备份与还原

    云端实验环境配置 VKE K8S Cluster Vultr 托管集群 https://vultr.com/ 3 个 worker 节点,kubectl get nodes. k8s-paas-71a ...

  8. 【Android】移除 Android frameworks 层，当 Linux 系统使用。（服务移除篇）

    前言说明 此文章仅作为技术经验记录,核心思想,就是在 init.rc 里面移除服务,致使 frameworks 不被启动,其它不便多说. 此文章内容为系统服务移除篇,最终实现的效果是 Android ...

  9. sun.security.validator.ValidatorException: PKIXpath building failed: sun.security.provider,javax.net.ssT.SSLHandshakeExceptions.certpath.SunCertPathBuilderException

    报错信息: sun.security.validator.ValidatorException: PKIXpath building failed: sun.security.provider,jav ...

  10. Linux之ssh远程连接

    Linux之ssh远程连接 一.下载远程连接工具Xshell Xshell是一种远程连接工具,可用来远程连接虚拟机. Xshell免费版下载地址 输入名字和邮箱,可以在邮箱看到下载Xshell的链接. ...