jQuery弹出提示信息简洁版(自动消失)

您所在的位置:网站首页 html弹窗提示 jQuery弹出提示信息简洁版(自动消失)

jQuery弹出提示信息简洁版(自动消失)

#jQuery弹出提示信息简洁版(自动消失)| 来源: 网络整理| 查看: 265

  之前看了有一些现成的blockUI、Boxy、tipswindow等的jQuery弹出层插件,可是我的要求并不高,只需要在保存后弹出提示信息即可,至于复杂点的弹出层-可以编辑的,我是直接用bootstrap的modal来实现的,因此我就自己做了一个简洁的可以用来弹出提示信息的功能。

  首先在页面放一个提示strong:。接下来给它设置一下样式:

  提示信息样式 #tip { position: absolute; top: 50px; left: 50%; display: none; z-index: 9999; }   提示信息脚本 //tip是提示信息,type:'success'是成功信息,'danger'是失败信息,'info'是普通信息,'warning'是警告信息 function showTip(tip, type) { var $tip = $('#tip'); $tip.stop(true).prop('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样 alert-warning式来美化。还有为什么要用stop(true)呢,主要是因为连续弹出多个提示框的时候,我的做法是让之前的提示框直接结束所有运动,w3c一看,$(selector).stop(stopAll,goToEnd),stopAll就是停止未完成的所有运动。

  不过这样有个问题,如果文本太短觉得不好怎么办,那就给它#tip加个最小宽度:

min-width: 200px; text-align: center;

  至于为何不给showTip方法加个参数设置弹出信息的停留时间呢,那只是我不需要这个参数,直接写死也可以,这只是个人作风。还有个问题是showTip方法用起来还是有点不方便呀,那就再封装一下:

function ShowMsg(msg) { ShowTip(msg, 'info'); } function ShowSuccess(msg) { ShowTip(msg, 'success'); } function ShowFailure(msg) { ShowTip(msg, 'danger'); } function ShowWarn(msg, $focus, clear) { ShowTip(msg, 'warning'); if ($focus) {     $focus.focus();   if (clear) $focus.val('');   } return false; }

 

  这样在ajax返回信息需要提示的时候调用一下ShowSuccess或者ShowFailure方法就可以了。你可能会有疑问ShowWarn怎么长的不一样,是干嘛子的呢,主要是因为在表单提交的时候需要进行验证,客户端验证的时候就调用这个方法,用法例如:

加两个参数$focus和clear主要是为了方便使用。。。

  另外若网页有iframe内联框架,若该iframe里也想让顶级窗口弹出提示信息,则得改一下showTip方法:

//tip是提示信息,type:'success'是成功信息,'danger'是失败信息,'info'是普通信息,'warning'是警告信息 function showTip(tip, type) {  var $tip = $('#tip', top.document);   $tip.stop(true).prop('class', 'alert alert-' + type).text(tip).css('margin-left', - $tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500);}

 

  如果不想样式和span以及脚本太分散,可以把他们整合成一个js插件: //tip是提示信息,type:'success'是成功信息,'danger'是失败信息,'info'是普通信息,'warning'是警告信息 function ShowTip(tip, type) { var $tip = $('#tip'); if ($tip.length == 0) { $tip = $(''); $('body').append($tip); } $tip.stop(true).prop('class', 'alert alert-' + type).text(tip).css('margin-left', -$tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500); } function ShowMsg(msg) { ShowTip(msg, 'info'); } function ShowSuccess(msg) { ShowTip(msg, 'success'); } function ShowFailure(msg) { ShowTip(msg, 'danger'); } function ShowWarn(msg, $focus, clear) { ShowTip(msg, 'warning'); if ($focus) {     $focus.focus();   if (clear) $focus.val('');   } return false; }

 

  亲自试一试


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3