东莞家具行业营销型网站建设多少钱,南京建设银行网站首页,网站建设需要资料,网络推广理实一体化软件引言
最近在找一个可以自动消失的提示框#xff0c;找来找去#xff0c;找到了这个#xff1a;提示框设置_html页面提示框等待一定时间消失博主写得很好#xff0c;可以直接复制运行出来#xff0c;我也从中得以受益。本篇文章对这篇博客的代码做了一些小的更新#xff…引言
最近在找一个可以自动消失的提示框找来找去找到了这个提示框设置_html页面提示框等待一定时间消失博主写得很好可以直接复制运行出来我也从中得以受益。本篇文章对这篇博客的代码做了一些小的更新 修复拼写错误 去掉无关的样式引用bootstrap.min.js和bootstrap.min.js
完整代码
!DOCTYPE html
htmlheadmeta charsetutf-8titleBootstrap Example/titlemeta nameviewport contentwidthdevice-width, initial-scale1script srchttps://cdn.staticfile.org/jquery/2.1.1/jquery.min.js/scriptstyle.alert-prompt {background: rgba(0, 0, 0, 0.8);color: #fff;}.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}/style
/headbodydiv classcontainerh4模拟数据查询查询失败显示一个模态框1.2秒后自动消失/h4button typebutton classbtn onclicktest(alert-danger)查询失败/buttonbutton typebutton classbtn onclicktest(alert-success)成功/buttonbutton typebutton classbtn onclicktest(alert_warning)警告/buttonbutton typebutton classbtn onclicktest(alert_info)信息提示/buttonbutton typebutton classbtn onclicktest(alert_info2)信息提示2/button/divscriptfunction test(str) {switch (str) {case alert-success: success_prompt(提交成功); break;case alert_warning: warning_prompt(错误警告); break;case alert-danger: fail_prompt(提交失败); break;case alert_info: info_prompt(未查询到数据); break;default: alert_prompt(未查询到数据);}}/*** 弹出式提示框默认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;$(div idpromptModal).appendTo(body).addClass(alert style).css({display: block,z-index: 99999,left: ($(document.body).outerWidth(true) - 120) / 2,top: ($(window).height() - 45) / 2,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);};// 失败提示var fail_prompt function (message, time) {prompt(message, alert-danger, time);};// 提醒var warning_prompt function (message, time) {prompt(message, alert-warning, time);};// 信息提示var info_prompt function (message, time) {prompt(message, alert-info, time);};// 信息提示var alert_prompt function (message, time) {prompt(message, alert-prompt, time);};/script
/body/html注意[1]
这种方式在与window.location.reload() 同时使用时会造成提示框提示短暂时间就会被页面刷新这种情况可以使用setTimeout方法设置页面在一段时间后进行刷新。例如success_prompt(提交成功);
setTimeout(window.location.reload(),1200);参考资料
[1] 提示框设置_html页面提示框等待一定时间消失
