Theme:
Processing...
Description & Source Code

A modal dialog prompts user input before proceeding an action; in ZK, you could optionally stop the program execution altogether with the invocation of a modal dialog.

In this demo, the modal dialog contains a ZUL file which is rendered dynamically on demand.
New Update : jQuery animation is included when the dialog is closed or opened.

modal_dialog.zul
<div apply="demo.window.modal_dialog.ModalDialogController">
	<button id="orderBtn" label="Order Coffee" autodisable="self" />
</div>
employee_dialog.zul
<window id="modalDialog" title="Coffee Order" border="normal" width="460px"
	apply="demo.window.modal_dialog.EmployeeDialogController"
	position="center,center" closable="true" 
	action="show: slideDown;hide: slideUp">
	<vlayout>
		<grid>
			<columns>
				<column hflex="1" label="Name" />
				<column hflex="2" label="Coffee Type" align="center" />
				<column hflex="1" label="Quantity" align="center" />
			</columns>
			<rows>
				<row>
					<label value="Evan" />
					<label value="Java" />
					<label value="2" />
				</row>
				<row>
					<label value="Billy" />
					<label value="Latte" />
					<label value="3" />
				</row>
				<row>
					<label value="Roger" />
					<label value="Americano" />
					<label value="6" />
				</row>
			</rows>
		</grid>
		<button id="closeBtn" hflex="1" label="close"/>
	</vlayout>
</window>
ModalDialogController.java
package demo.window.modal_dialog;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zul.Window;

public class ModalDialogController extends SelectorComposer<Component> {
	private static final long serialVersionUID = 1L;
	
	@Listen("onClick = #orderBtn")
	public void showModal(Event e) {
		//create a window programmatically and use it as a modal dialog.
		Window window = (Window)Executions.createComponents(
				"/widgets/window/modal_dialog/employee_dialog.zul", null, null);
		window.doModal();
	}
}
EmployeeDialogController.java
package demo.window.modal_dialog;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
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.zul.Window;

public class EmployeeDialogController extends SelectorComposer<Component> {
	private static final long serialVersionUID = 1L;
	
	@Wire
	Window modalDialog;
	
	@Listen("onClick = #closeBtn")
	public void showModal(Event e) {
		modalDialog.detach();
	}
}