使用引导程序的自定义通知

Question

我正在使用引导通知向我的最终用户显示信息性消息。 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>

编辑以在 Header 中显示文件我使用了 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' />

Answer 1

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

确保包含所有必要的库（CSS 和 JS）。在我的 JSFiddle 示例中，我包含了来自 CDN 的 bootstrap-notify.min.css、alert-bangtidy.min.css、alert-blackgloss.min.css 和 bootstrap-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 文件之前包含jQuery 和Bootstrap。您可以将其用作您的 CDN 链接https://cdnjs.cloudflare.com/ajax/libs/bootstrap-notify/0.2.0/js/bootstrap-notify.min.js。