Description & Source Code

Notification notifys users an info, warning or error in a pop-up dialog.

A simple notification is displayed in the middle of the screen, and fade out when the user clicks.
A closable notification fades out when the user clicks the close button.
A custom notification can have a specific position, or be anchored on another component. It can also receive a different icon, or set a custom fade out delay.

	<hlayout apply="demo.popup.notification.NotificationComposer"
			<div style="padding-top:15px;padding-bottom:15px;">
				<button label="Simple notification" id="notifBtn" />
			<div style="padding-top:15px;padding-bottom:15px;">
				<button label="Closable notification"
					id="notifCloseBtn" />
			<vlayout style="padding-top: 15px;">
					<label value="Notification type: " />
					<radiogroup id="rgType">
						<radio label="info" selected="true" />
						<radio label="warning" />
						<radio label="error" />
				<button label="Notification icon and target" id="notifTargetBtn" />
package demo.popup.notification;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.util.Clients;
import org.zkoss.zk.ui.util.Notification;
import org.zkoss.zul.Button;
import org.zkoss.zul.Radiogroup;

public class NotificationComposer extends SelectorComposer<Component> {

	private Radiogroup rgType;
	private Button notifTargetBtn;

	public void doAfterCompose(Component comp) throws Exception {

	@Listen("onClick = #notifBtn")
	public void notifyBtnClick() {"You have been notified");

	@Listen("onClick = #notifCloseBtn")
	public void notifyCloseBtnClick() {"You have been notified", true);

	@Listen("onClick = #notifTargetBtn")
	public void notifyCustomBtnClick() {"You have been notified", rgType.getSelectedItem().getLabel(),
				notifTargetBtn, "after_start", 2000, false);