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

  • 相关阅读:
    HDU 5120 计算两圆环相交面积
    HDU
    Dinic (邻接表实现) + 当前弧优化
    java —— static 关键字
    java —— this 关键字
    双连通分量 Road Construction POJ
    2-SAT(HDU-3062 party)
    java——构造器理解
    『题解』Codeforces1142A The Beatles
    『题解』Codeforces1142B Lynyrd Skynyrd
  • 原文地址:https://www.cnblogs.com/yaoqingzhuan/p/11564345.html
Copyright © 2011-2022 走看看