Protocol also provides a JavaScript library to invoke and dismiss a notification bar.
The script provides the following options:
origin
[DOM Element] element that triggered the notificationoptions
[Object] object of paramstitle
[String] message to display in the notification. (Required)cta
: [Object] options for rendering an Anchor node after the title.text
: (Required) text content for an Anchor elementurl
: (Required) URL for the Anchor elementattrs
: map of additional options for the Anchor element, eg: ‘target’, ‘rel’className
[String] optional CSS class name to apply to the notification.onNotificationOpen
[Function] function to fire after notification has been opened.onNotificationClose
[Function] function to fire after notification has been closed.hasDismiss
[Boolean] include or not include dismiss button.closeText
[String] text to use for close button a11y.isSticky
[Boolean] determines if notification is absolutely positioned and sticky.
<p><button class="mzp-c-button mzp-js-notification-trigger" type="button">Open Notification</button></p>
<script src="../../protocol/js/protocol-notification-bar.js"></script>
<script>
(function() {
'use strict';
var dismissButtons = document.querySelectorAll('.mzp-c-notification-bar-button');
for (var i = 0; i < dismissButtons.length; i++) {
dismissButtons[i].addEventListener('click', function(e) {
e.currentTarget.parentNode.remove();
}, false);
}
var notificationButton = document.querySelector('.mzp-js-notification-trigger');
notificationButton.addEventListener('click', function(e) {
e.preventDefault();
Mzp.Notification.init(e.target, {
title: 'This is the title.',
cta: {
text: "And this is a CTA link.",
url: "https://www.mozilla.org",
attrs: {
"target": "_blank",
"rel": "noopener"
}
},
className: 'mzp-t-warning',
closeText: 'Close notification',
hasDismiss: true,
isSticky: true,
onNotificationOpen: function() {
console.log('Notification opened');
},
onNotificationClose: function() {
console.log('Notification closed');
}
});
}, false);
})();
</script>