Start

Javascript extension ui.notification allows showing notifications on a page.

Connect at PHP page

\Bitrix\Main\UI\Extension::load("ui.notification");

Use in JavaScript

Show notification in default position.

BX.UI.Notification.Center.notify({
	content: "Successfully deleted file отчет-за-февраль.docs"
});

Show message to bottom left on the page.

BX.UI.Notification.Center.notify({
	content: "Notification to bottom left",
	position: "bottom-left"
});

Specify DOM-element as notification contents.

BX.UI.Notification.Center.notify({
	content: BX.create("div", {
		style: {
			fontSize: "20px"
		},
		html: "Hello"
	})
});

Notification with "Cancel" action.

BX.UI.Notification.Center.notify({
	content: "File deleted successfully",
	position: "top-right",
	autoHideDelay: 5000,
	closeButton: false,
	category: "disk-file-deleted",
	actions: [{
		title: "Cancel",
		events: {
			click: function(event, balloon, action) {
				balloon.close();
			} 
		} 
	}]
});

Notification with arbitrary layout.

class CircleBalloon extends BX.UI.Notification.Balloon
{
	render()
	{
		var content = this.getContent();
		return BX.create("div", {
			props: {
				className: "circle-balloon"
			},
			children: [
				BX.create("div", {
					props: {
						className: "circle-balloon-content"
					},
					html: BX.type.isDomNode(content) ? null : content,
					children: BX.type.isDomNode(content) ? [content] : []
				})
			]
		})
	}
}

BX.UI.Notification.Center.notify({
	content: "Hello",
	type: "CircleBalloon",
});