【bootstrap】Bootstrap Notify的使用步骤

最新推荐文章于 2024-10-18 12:04:08 发布

weixin_34212762

最新推荐文章于 2024-10-18 12:04:08 发布

阅读量709

点赞数

文章标签： javascript ViewUI

本文档介绍了BootstrapNotify插件的使用方法，包括引入JS文件、添加动画CSS、具体使用示例及展示效果。适用于希望增强网站通知功能的前端开发者。

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

Bootstrap Notify说明文档：http://bootstrap-notify.remabledesigns.com/

Bootstrap Notify的GitHub地址：https://github.com/mouse0270/bootstrap-notify

自己使用步骤：

　　1.引入js【需要提前引入jQuery和bootstrap的js】

<script src="../static/js/admin/bootstrap-notify.min.js"></script>

　　2.引入动画css【需要提前引入bootstrap的css】

<link href="../static/css/login/animate.css" rel="stylesheet" />

　　3.使用

 //按钮点击事件
    $(".seachA").click(function(){
       var notify= notifyMsg("德玛西亚");
    });


    function notifyMsg(msg){
       var notify =  $.notify({
            // options
            icon: 'glyphicon glyphicon-warning-sign',
            title: '警告',
            message: msg,
            target: '_blank'
        },{
            // settings
            element: 'body',
            position: null,
            type: "warning",
            allow_dismiss: true,
            newest_on_top: true,
            showProgressbar: false,
            placement: {
                from: "bottom",
                align: "center"
            },
            offset: 20,
            spacing: 10,
            z_index: 1031,
            delay: 5000,
            timer: 1000,
            url_target: '_blank'
        });

       return notify;
    }

　　4.效果