Processing...
Description & Source Code

A toast is a notification message which can be stacked. If multiple toasts are sent, the newest toast is displayed on top, and the previous toast stack is pushed down.

A simple toast is displayed in the middle-top side of the screen, and fade out after 5 seconds. Multiple simple toasts will stack.
A closable toast doesn't fade, but stays in the toast stack until the user clicks the close button.
A custom toast can have a different positions. It can also receive a different icon, or set a custom fade out delay.

toast.zul
<zk>
	<style>
	.z-toast-position {
	    z-index: 20;
	}
	
	</style>
	<vlayout apply="demo.popup.toast.ToastComposer">
		<div style="padding-bottom: 15px; padding-top:15px;">
			<button label="Simple toast" id="toastBtn" />
		</div>
		<vlayout style="padding-top: 15px; padding-bottom: 15px;">
			<hlayout>
				<label value="Complex toast type: "/>
				<radiogroup id="rgType">
					<radio label="info" selected="true"/>
					<radio label="warning"/>
					<radio label="error"/>
				</radiogroup>
			</hlayout>
			<button label="Closable toast" id="toastCloseBtn" />
		</vlayout>
		<vlayout style="padding-top: 15px;">
			<hlayout>
				<label value="Complex toast position: "/>
				<radiogroup id="rgPosition">
					<radio label="left"/>
					<radio label="right" selected="true"/>
				</radiogroup>
			</hlayout>
			<button label="Toast position" id="toastPositionBtn" />
		</vlayout>
	</vlayout>
</zk>
ToastComposer.java
package demo.popup.toast;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zkmax.ui.util.Toast;
import org.zkoss.zul.Radiogroup;
import org.zkoss.zul.Textbox;

public class ToastComposer extends SelectorComposer<Component> {

	@Wire
	private Textbox target;
	@Wire
	private Radiogroup rgType;
	@Wire
	private Radiogroup rgPosition;

	@Override
	public void doAfterCompose(Component comp) throws Exception {
		super.doAfterCompose(comp);
	}

	@Listen("onClick = #toastBtn")
	public void toastBtnClick() {
		Toast.show("You have been toasted");
	}

	@Listen("onClick = #toastCloseBtn")
	public void toastCloseBtnClick() {
		Toast.show("This toast is closable", rgType.getSelectedItem().getLabel(), null, 0, true);
	}

	@Listen("onClick = #toastPositionBtn")
	public void toastCustomBtnClick() {
		Toast.show("This toast is closable", rgType.getSelectedItem().getLabel(),
				"middle_" + rgPosition.getSelectedItem().getLabel(), 2000, false);
	}

}