zoukankan      html  css  js  c++  java
  • css_自定义提示框

    1.描述

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

    2.代码

    css:

        .succAlert {
                display: none;
                position: absolute;
                top: 50%;
                left: 35%;
                 20%;
                height: 5%;
                 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%;
                 20%;
                height: 5%;
                 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.结果

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

  • 相关阅读:
    查看端口被占用
    Eclipse导入包
    Eclipse中构造方法自动生成
    Eclipse中get/set方法自动生成
    Eclipse改字体大小
    设计六原则
    类的关系
    JAVA实现多线程下载
    try...catch的前世今生
    447. 回旋镖的数量
  • 原文地址:https://www.cnblogs.com/smxbo/p/13160514.html
Copyright © 2011-2022 走看看