首页 > 代码库 > jQuery弹出提示信息简洁版(自动消失)
jQuery弹出提示信息简洁版(自动消失)
之前看了有一些现成的blockUI、Boxy、tipswindow等的jQuery弹出层插件,可是我的要求并不高,只需要在保存后弹出提示信息即可,至于复杂点的弹出层-可以编辑的,我是直接用bootstrap的model来实现的,因此我就自己做了一个简洁的可以用来弹出提示信息的功能。
首先在页面放一个提示span:<span id="tip"></span>。接下来给它设置一下样式:
提示信息样式
#tip { font-weight: bold; position: absolute; top: 50px; left: 50%; display: none; z-index: 9999;}
提示信息脚本
//tip是提示信息,type:‘success‘是成功信息,‘danger‘是失败信息,‘info‘是普通信息function ShowTip(tip, type) { var $tip = $(‘#tip‘); $tip.attr(‘class‘, ‘alert alert-‘ + type).text(tip).css(‘margin-left‘, - $tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500);}
这样子,简单的jQuery弹出提示信息就完成了。话说上面的东西做了什么呢,其实就是弹出一个提示信息,该信息位置在网页top50px,left50%,然后再用margin-left左移信息的一半宽度,以此实现左右居中,半秒fadeIn显示,2秒停留,然后半秒fadeOut消失。除此之外呢其实我还给弹出信息美化了一下,就是用了bootstrap的alert alert-success alert-danger alert-info样式来美化。
不过这样有个问题,如果文本太短觉得不好怎么办,那就给它#tip加个最小宽度:
min-width: 200px;text-align: center;
至于为何不给ShowTip方法加个参数设置弹出信息的停留时间呢,那只是我不需要这个参数,直接写死也可以,这只是个人作风。还有个问题是ShowTip方法用起来还是有点不方便呀,那就再封装一下:
function ShowInfo(msg) { ShowTip(msg, ‘info‘);}function ShowSuccess(msg) { ShowTip(msg, ‘success‘);}function ShowFailure(msg) { ShowTip(msg, ‘danger‘);}
这样在ajax返回信息需要提示的时候调用一下ShowSuccess或者ShowFailure方法就可以了。
本文示例代码
jQuery弹出提示信息简洁版(自动消失)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。