zoukankan      html  css  js  c++  java
  • jQuery弹出提示信息自动消失简洁版

    // 在bootstrap中可以,可以使用如下方式实现弹出提示信息自动消失,如果没有使用bootstrap框架,可以自定义样式

    //
    tip是提示信息,type:'success'是成功信息,'danger'是失败信息,'info'是普通信息,'warning'是警告信息 function ShowTip(tip, type) { var $tip = $('#tip'); if ($tip.length == 0) { // 设置样式,也可以定义在css文件中 $tip = $('<span id="tip" style="position:fixed;top:50px;left: 50%;z-index:9999;height: 35px;padding: 0 20px;line-height: 35px;"></span>'); $('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; }

     效果图如下

    3s后会自动消失,比原生的alert()体验更好

  • 相关阅读:
    几种常用类的学习
    类,接口
    方法
    数组使用
    条件控制与循环
    类型转换,运算符
    Java基本类型
    SVN基本使用
    【转】MySQL的btree索引和hash索引的区别
    常用命令(java、linux)
  • 原文地址:https://www.cnblogs.com/yaoqingzhuan/p/11564345.html
Copyright © 2011-2022 走看看