基于jquery框架写的页面提示遮罩层(不重复搬砖)!!!

/**
 * 成功提示提示框盒子(底层依赖jq框架动画效果)
 * @param msg 提示信息
 * @param intime 淡入时间毫秒
 * @param outime 淡出时间毫秒
 */
function success_show_box(msg,intime,outime){
    $("#success_show_box").parent().remove();
    var div = document.createElement("div");
    div.innerHTML = "
"+ "
"+"
"+msg+"
"+"
" +"
"; document.body.insertBefore(div, document.body.firstElementChild); $("#success_show_box").fadeIn(intime);//淡入遮罩层 $("#success_show_box").fadeOut(outime);//淡出遮罩层 } /** * 错误提示提示框盒子(底层依赖jq框架动画效果) * @param msg 提示信息 * @param intime 淡入时间毫秒 * @param outime 淡出时间毫秒 */ function error_show_box(msg,intime,outime){ $("#error_show_box").parent().remove(); var div = document.createElement("div"); div.innerHTML = "
"+ "
"+"
"+msg+"
"+"
" +"
"; document.body.insertBefore(div, document.body.firstElementChild); $("#error_show_box").fadeIn(intime);//淡入遮罩层 $("#error_show_box").fadeOut(outime);//淡出遮罩层 }

vue.js react.js 很诱人。。。但是有时候有些项目还是会用到jquery的,搬砖也得讲究效率,一些代码片段积累起来自己开发也会省事省心。有时候感觉能不用插件就不用,因为这样意味着系统变得臃肿,和各种前端的兼容性问题.

主要是页面中很多地方操作完要提示,这种提示框可以完成抽象出来,脱离前端的交互业务,看下图使用场景。

调用示例:error_show_box('请选择商品属性!',500,500);

                error_show_box('不可减少了哦!',500,500);

                success_show_box('提交订单成功!',500,500);

基于jquery框架写的页面提示遮罩层(不重复搬砖)!!!_第1张图片

基于jquery框架写的页面提示遮罩层(不重复搬砖)!!!_第2张图片

基于jquery框架写的页面提示遮罩层(不重复搬砖)!!!_第3张图片

 

你可能感兴趣的:(jquery)