jQuery实现html下自动消失的提示框代码

2023-09-11实例代码

262

jQuery实现html下自动消失的提示框代码，具体代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Bootstrap Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <style>
        .alert-prompt {
            background: rgba(0, 0, 0, 0.8);
            color: #fff;
        }
        .alert-success {
            color: #3c763d;
            background-color: #dff0d8;
            border-color: #d6e9c6
        }
        .alert-info {
            color: #31708f;
            background-color: #d9edf7;
            border-color: #bce8f1
        }

        .alert-warning {
            color: #8a6d3b;
            background-color: #fcf8e3;
            border-color: #faebcc
        }


        .alert-danger {
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1
        }

    </style>
</head>

<body>

    <div class="container">
        <h4>模拟数据查询，查询失败显示一个模态框，1.2秒后自动消失</h4>
        <button type="button" class="btn" onclick="test('alert-danger')">查询失败</button>
        <button type="button" class="btn" onclick="test('alert-success')">成功</button>
        <button type="button" class="btn" onclick="test('alert_warning')">警告</button>
        <button type="button" class="btn" onclick="test('alert_info')">信息提示</button>
        <button type="button" class="btn" onclick="test('alert_info2')">信息提示2</button>
    </div>
    <script>
        function test(str) {
            switch (str) {
                case "alert-success": success_prompt("提交成功"); break;
                case "alert_warning": warning_prompt("错误警告"); break;
                case "alert-danger": fail_prompt("提交失败"); break;
                case "alert_info": info_prompt("未查询到数据"); break;
                default: alert_prompt("未查询到数据");
            }

        }

        /**
         * 弹出式提示框，默认1.2秒自动消失
         * @param message 提示信息
         * @param style 提示样式，有alert-success、alert-danger、alert-warning、alert-info
         * @param time 消失时间
         */
        var prompt = function (message, style, time) {
            style = (style === undefined) ? 'alert-success' : style;
            time = (time === undefined) ? 1200 : time;
            $('<div id="promptModal">')
                .appendTo('body')
                .addClass('alert ' + style)
                .css({
                    "display": "block",
                    "z-index": 99999,
                    "left": ($(document.body).outerWidth(true) - 120) / 2,
                    "top": ($(window).height() - 45) / 2,
                    "position": "absolute",
                    "padding": "20px",
                    "border-radius": "5px"
                })
                .html(message)
                .show()
                .delay(time)
                .fadeOut(10, function () {
                    $('#promptModal').remove();
                });
        };

        // 成功提示
        var success_prompt = function (message, time) {
            prompt(message, 'alert-success', time);
        };

        // 失败提示
        var fail_prompt = function (message, time) {
            prompt(message, 'alert-danger', time);
        };

        // 提醒
        var warning_prompt = function (message, time) {
            prompt(message, 'alert-warning', time);
        };

        // 信息提示
        var info_prompt = function (message, time) {
            prompt(message, 'alert-info', time);
        };

        // 信息提示
        var alert_prompt = function (message, time) {
            prompt(message, 'alert-prompt', time);
        };
    </script>
</body>

</html>

这种方式在与window.location.reload() 同时使用时，会造成提示框提示短暂时间就会被页面刷新，这种情况可以使用setTimeout()方法，设置页面在一段时间后进行刷新。例如：

success_prompt("提交成功");
setTimeout("window.location.reload()",1200);

The End

layui后台布局实例代码

layui后台布局的实例代码，以下是详细代码： !DOCTYPE htmlhtmlhead meta charset="utf-8" meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" titlelayout 后台大布局 - Layui/title link rel="stylesheet" ...

2025-10-15 实例代码

可自动切换的tab实例代码

可自动切换的tab实例代码，html代码如下： !-- tab标签代码begin --div class="tab1" id="tab1" div class="menu" ul li id="one1" onclick="setTab('one',1)"新闻/li li id="one2" onclick="setTab('one',2)"活动/li li id="one3" onclick="setTab('one',3)"...

2025-09-16 实例代码

114

php数据处理：数组根据某字段进行分组

php数据处理：数组根据某字段进行分组，实例代码如下： /** * @description:根据数据 * @param {dataArr:需要分组的数据；keyStr:分组依据} * @return: */ protected function dataGroup(array $dataArr,string $keyStr) :array { $newArr=[]; foreach ($data...

2025-06-12 实例代码

188

LayUI登录页面页设计实例

实例代码如下： !DOCTYPE htmlhtml lang="en" head meta charset="utf-8" link rel="stylesheet" href="layui/css/layui.css" style type="text/css" .container{ width: 420px; height: 320px; min-height: 320px; max-height: 320px; position: absolute; t...

2025-04-13 实例代码

234

layui实现带清除按钮的输入框

layui实现带清除按钮的输入框，首先html文件如下： !DOCTYPE htmlhtmlhead meta charset="utf-8" meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" title测试 - layui/title link rel="stylesheet" href="layui/css/lay...

2024-12-31 实例代码

200

input file上传图片设置的实例代码

input file上传图片设置的实例代码 div纯input与type/div input type="file" div指明需要图片/div input type="file" accept='image/*' div指明需要多张图片/div input type="file" multiple accept='image/*' div指明调用摄像头获取图片/div input type="fil...

2024-12-30 实例代码

133

相关推荐

layui后台布局实例代码

可自动切换的tab实例代码

php数据处理：数组根据某字段进行分组

LayUI登录页面页设计实例

layui实现带清除按钮的输入框

input file上传图片设置的实例代码

热门文章

热门精品源码

最新VIP资源