Jquery实现淡入淡出自动消失的提示框,Jquery+css实现加载中提示框 柔情只为你懂 2022-05-16 13:47 865阅读 0赞 ### **浏览器原生弹出框太丑,且不能自动消失,可以使用Jquery自定义一个消失提示框。** ### 样式写法参考了bootstrap样式的编写方式。 静态效果如下: ![70][] 首先在html页面body里任意位置写一个div <div class="tips"></div><!-- 提示框 --> 在css样式里添加样式: .tips{ display: none; position: fixed; top: 50%; left: 50%; min-width: 200px; max-width: 700px; transform: translate(-50%,-50%); z-index: 99999; text-align: center; padding: 15px; border-radius: 5px; } .tips-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .tips-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; } .tips-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; } .tips-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } 然后在js代码块了直接调用如下代码就可以实现淡入淡出提示框了 $('.tips').html('操作成功').addClass('alert-success').fadeIn().delay(1500).fadeOut(); 可以封装成方法,方便各种形式的提示框调用 //提供三个参数:提示信息文字,样式,停留时间。 function tips(message, style, time) { style = (style === undefined) ? 'tips-success' : style; time = (time === undefined) ? 1200 : time; $('<div>') .appendTo('body') .addClass('alert ' + style) .html(message) .fadeIn() .delay(time) .fadeOut(); }; // 成功提示框 function success-tips(message, time) { tips(message, 'alert-success', time); }; // 失败提示框 function function fail-tips(message, time) { tips(message, 'alert-danger', time); }; // 提醒框 function function warning-tips(message, time) { tips(message, 'alert-warning', time); }; // 信息提示框 function function info-tips(message, time) { tips(message, 'alert-info', time); }; 提示:如果按照以上封装成了方法,则body里不需要加div提示框了。 ### **What's more,可以利用上面tips的样式类型,写一个加载中的提示框。** ### 同理:先在body里任意位置添加一行代码: <div align="center" class="loading" ><img alt="" src="../image/Loading4.gif"></div> 其中,动态gif可以在千图网找,素材有很多。找一个和页面合适的就ok 然后添加样式: .loading { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 99999; padding: 15px; } 然后在js代码块里添加: $(.loading).show();//显示 $(.loading).hide();//隐藏 ok,大功告成! [70]: /images/20220516/d7ca6848c6314753abe42b3d858c6779.png
还没有评论,来说两句吧...