JQuery弹出提示框定时自动消失
2021-06-16 20:03
标签:成功 define 代码实现 timeout idg round info app div 运行效果: 用div而非setTimeout(),在页面中央显示提示,1.5秒后消失,不影响页面的正常布局。 HTML代码显示提示内容,放在页面中任何位置。 实际运行中其它居中参考 弹出框参考了 Bootstrap 的样式: 首先,加载JQuery,然后用下面代码实现 还可结合关闭窗口代码: 如果不想在HTML中加 一般情况下,如果这个方式使用得很频繁,写成函数可以提高复用: JQuery弹出提示框定时自动消失 标签:成功 define 代码实现 timeout idg round info app div 原文地址:http://www.cnblogs.com/zhijiangch/p/7270109.html1. HTML代码
div class="alert">div>
div class="alert" style="height:50px;line-height:50px;font-size:14px;width:65%;margin:auto;position:absolute;top:0;left:0;bottom:0;right:0;">div>
2. CSS代码
.alert {
display: none;
position: fixed;
top: 50%;
left: 50%;
min-width: 200px;
margin-left: -100px;
z-index: 99999;
padding: 15px;
border: 1px solid transparent;
border-radius: 4px;
}
.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;
}
3. Javascript代码
1.5秒
后淡出效果:$(‘.alert‘).html(‘操作成功‘).addClass(‘alert-success‘).show().delay(1500).fadeOut();
//关闭网页
window.opener = null;
window.open(‘‘, ‘_self‘);
window.close();
//关闭微信网页
setTimeout("WeixinJSBridge.call(‘closeWindow‘)", 1000);
DIV
,可以直接用JS把DIV添加到页面中,如下:$(‘
/**
* 弹出式提示框,默认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;
$(‘