使用引导程序自定义通知


Custom Notifications using bootstrap

我使用引导程序通知向最终用户显示信息性消息。http://goodybag.github.io/bootstrap-notify/

我有一个叫的DIV

<div class="notifications bottom-right"></div>

理论上,库应该处理JS。我已经确保库已经加载,但仍然没有显示通知窗口。我不知道为什么我希望在页面加载时发生这种情况,所以用户会被告知是否有点挂起。

我将如何调整脚本标记以通过PHP实现这一点?。

<script>
    $('.bottom-right').notify({
        message: { text: 'Aw yeah, It works!' }
    }).show(); // for the ones that aren't closable and don't fade out   there is a .hide() function.
</script>

编辑以在标头中显示文件我已使用wp-enque obv

<script type='text/javascript' src='http://fundrasing.davidbuckleyni.co.uk/wp-content/themes/gogreensoccer5/js/bootstrap-notify.js?ver=201202012'></script>
<link rel='stylesheet' id='notifcations-css1-css'  href='http://fundrasing.davidbuckleyni.co.uk/wp-content/themes/gogreensoccer5/css/bootstrap-notify.css?ver=1.0' type='text/css' media='all' />
<link rel='stylesheet' id='notifcations-css2-css'  href='http://fundrasing.davidbuckleyni.co.uk/wp-content/themes/gogreensoccer5/css/styles/alert-blackgloss.css?ver=1.0' type='text/css' media='all' />
<link rel='stylesheet' id='notifcations-css3-css'  href='http://fundrasing.davidbuckleyni.co.uk/wp-content/themes/gogreensoccer5/css/styles/alert-bangtidy.css?ver=1.0' type='text/css' media='all' />

工作示例:https://jsfiddle.net/mwatz122/1k3s7m80/

确保包含所有必要的库(CSS和JS)。在我的JSFiddle示例中,我包含了CDN中的bootstrap-notify.min.cssalert-bangtidy.min.cssalert-blackgloss.min.cssbootstrap-notify.min.js

如果希望在页面加载时显示通知,则应在$(document).ready块中包含JavaScript代码,如图所示。

<div class='notifications bottom-right'></div>
$(document).ready(function () {
    $('.bottom-right').notify({
        message: {
            text: 'Aw yeah, It works!'
        }
    }).show();
});

编辑:

当页面加载时,您的网站出现错误:

Uncaught TypeError: $(...).notify is not a function

这意味着未检测到bootstrap-notify.min.js源文件。我会先尝试引用CDN,以确保它能正常工作。您应该在标头中的bootstrap-notify.min.js文件之前包含jQueryBootstrap。您可以将其用作您的CDN链接https://cdnjs.cloudflare.com/ajax/libs/bootstrap-notify/0.2.0/js/bootstrap-notify.min.js