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