css_自定义提示框

1.描述

用的bootstrap框架,但是整体风格跟bootstrap风格相差很大,需要自己定义一个提示框。

2.代码

css:

    .succAlert {
            display: none;
            position: absolute;
            top: 50%;
            left: 35%;
            width: 20%;
            height: 5%;
            width: 35%;
            padding: 5px;
            text-align: center;
            font-size: 16px;
            color: green;
            background-color: rgb(242,242,242);
            font-weight: bold;
        }
        .errorAlert {
            display: none;
            position: absolute;
            top: 50%;
            left: 35%;
            width: 20%;
            height: 5%;
            width: 35%;
            padding: 5px;
            text-align: center;
            font-size: 16px;
            color: crimson;
            background-color: rgb(242,242,242);
            font-weight: bold;
        }

javascript:

        $.ajax({
                type: "POST",//方法类型
                contentType:‘application/json‘,
                dataType: "json",//预期服务器返回的数据类型
                url: "http://localhost:8080/saveRBD",//url
                data: JSON.stringify(list),
                success: function (data) {
                    console.log("成功");
                    mySuccAlert("保存成功!");
                },
                error: function (result) {
                    console.log("失败");
                    myErrorAlert("添加失败,请稍后重试!");
                }
            });    
       function mySuccAlert(str) {
            var div = ‘<div class="succAlert"></div>‘;
            $(‘body‘).append(div)
            $(‘.succAlert‘).html(str);
            $(‘.succAlert‘).show();
            setTimeout(function() {
                $(‘.succAlert‘).hide();
                $(‘.succAlert‘).remove();
            }, 2000)
        }
        function myErrorAlert(str) {
            var div = ‘<div class="errorAlert"></div>‘;
            $(‘body‘).append(div)
            $(‘.errorAlert‘).html(str);
            $(‘.errorAlert‘).show();
            setTimeout(function() {
                $(‘.errorAlert‘).hide();
                $(‘.errorAlert‘).remove();
            }, 2000)
        }

3.结果

css_自定义提示框

css_自定义提示框

 

其实感觉也没有好看到哪去。。。

 

css_自定义提示框

上一篇:Nacos 2.0 正式发布,性能提升 10 倍!!


下一篇:js事件