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

引言

  • 最近在找一个可以自动消失的提示框,找来找去,找到了这个:提示框设置_html页面提示框等待一定时间消失
  • 博主写得很好,可以直接复制运行出来,我也从中得以受益。
  • 本篇文章对这篇博客的代码做了一些小的更新:
    • 修复拼写错误
    • 去掉无关的样式引用(bootstrap.min.jsbootstrap.min.js

完整代码(可以复制运行查看)

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Bootstrap Exampletitle>
    <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')">信息提示2button>
    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;
            $('
') .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>

注意[1]

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

参考资料

[1] 提示框设置_html页面提示框等待一定时间消失

你可能感兴趣的:(杂项,html,jquery,javascript)