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()体验更好

  • 相关阅读:
    C++ istringstream总结
    C++各数据类型的最值
    AcWing 机器人跳跃问题 二分
    蓝桥杯 矩形面积交
    蓝桥杯 完美的代价
    蓝桥杯 数的读法
    国内 镜像 下载
    redis的pipline使用
    MySQL额外操作
    sql强化演练( goods 表练习)
  • 原文地址:https://www.cnblogs.com/yaoqingzhuan/p/11564345.html
Copyright © 2011-2022 走看看