Jquery实现淡入淡出自动消失的提示框，Jquery+css实现加载中提示框

柔情只为你懂 2022-05-16 13:47 878阅读 0赞

### **浏览器原生弹出框太丑，且不能自动消失，可以使用Jquery自定义一个消失提示框。** ###

样式写法参考了bootstrap样式的编写方式。

静态效果如下：

![70][]

首先在html页面body里任意位置写一个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里任意位置添加一行代码：

其中，动态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