alert实用的提示框（可点击关闭，自动消失，悬浮于右上角）

程序员温眉

已于 2023-09-06 14:50:10 修改

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： bootstrap 文章标签： javascript

于 2023-06-29 11:36:21 首次发布

本文链接：https://blog.csdn.net/sublime_k/article/details/131452964

bootstrap 专栏收录该内容

2 篇文章

订阅专栏

该文提供了一段HTML、CSS和JavaScript代码示例，用于创建带有不同类型的提示信息（如成功、警告和错误）以及模态框。作者分享了一个名为`xAlert`的公共函数，该函数利用Gritter库展示具有可定制样式的弹出通知。此外，还提供了百度云链接下载相关资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【版权所有，文章允许转载，但须以链接方式注明源地址，否则追究法律责任】
【创作不易，点个赞就是对我最大的支持】

前言

仅作为学习笔记，供大家参考
总结的不错的话，记得点赞收藏关注哦！

效果图

在这里插入图片描述

导入js、css

考虑到csdn不好下载，这里附上百度云链接

链接：https://pan.baidu.com/s/1oMFrR8UV03Ke0Nl6P-KlLA
提取码：wmwm

html代码

将代码块直接放到body下边

 
<div id="pubAlert" class="alert alert-block block-b-open">
    <button type="button" class="close" data-dismiss="alert"></button>
    <span class="alertContent"></span>
</div>
<div id="MessageModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h3 id="MessageModalTitle">提示信息</h3>
    </div>
    <div class="modal-body" id="MessageModalContent"></div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
    </div>
</div>

js代码

<script type="text/javascript">
    $(function() {
            xAlert("本系统将于7月进行业务升级改造，为保证7月数据正常报送，请各企业用户于7月4日-7日通过找回密码进行密码修改，如预留手机号有变更，请于6.30号之前提交企业基本信息变更申请进行变更！", 2);
        });
    /**
     *
     * 公共信息提示方法
     * @param {} msg 显示的提示内容
     * @param {} type 类型，默认为空，1：绿色成功信息，2：蓝色提示信息，3：橙色警告信息，4：红色错误信息
     */
    function xAlert(msg,type){
        var showType = "";
        var showTitle = "";
        var showClass = "";
        if(type==undefined || type==1){
            showTitle = "成功提示"
            showClass = "gritter-success";
        }else if(type==2){
            showTitle = "信息提示"
            showClass = "gritter-info";
        }else if(type==3){
            showTitle = "警告提示"
            showClass = "gritter-warning";
        }else if(type==4){
            showTitle = "错误提示"
            showClass = "gritter-error";
        }
        $.gritter.add({
            title: showTitle,
            text:msg,
            time: 60000,
            class_name: showClass+'gritter-center gritter-light'
        });
    }
    </script>