首页 > Web开发 > 详细

css_自定义提示框

时间:2020-06-18 22:58:05      阅读:72      评论:0      收藏:0      [点我收藏+]

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_自定义提示框

原文:https://www.cnblogs.com/smxbo/p/13160514.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!