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

  • 相关阅读:
    杭电ACM1.2.6 Decimal System
    杭电ACM1.2.7 GPA
    taro hook 倒计时setTimeout版
    taro hook 倒计时setInterval版
    Vuecli3内存溢出解决方案记录
    哈希
    hashmap和hashtable区别
    HashMap[转]
    JAVA中List、Map、Set
    C++和MATLAB混合编程DLL篇[转]
  • 原文地址:https://www.cnblogs.com/yaoqingzhuan/p/11564345.html
Copyright © 2011-2022 走看看