Processing...
Description & Source Code

This sample demonstrates how to dictate the position for ZK's popup. This manipulation can be done both from the client-side and the server-side.

popup_position.zul
<zk>
	<style>
		.container { text-align:center; margin: 50px 100px; } 
		.container .z-panel-embedded-cnt { padding:0; } 
		.txb { border: none; }
	</style>
	<zscript><![CDATA[
	String selectedPosition = "before_start";
]]></zscript>
	<panel sclass="container" width="300px">
		<panelchildren>
			<textbox id='txb' sclass="txb" value="This is a textbox ! Click Here To See Popup" hflex="1" style="background:#FFFFCC" rows="8"
				onClick='mailPop.open(self,selectedPosition)' />
		</panelchildren>
	</panel>
	<popup id="mailPop" width="150px">
		<groupbox sclass="z-demo-config" closable="false">
			<caption>This is Popup</caption>
			<html><![CDATA[ Contact Us : info@zkoss.org ]]></html>
		</groupbox>
	</popup>
</zk>
popup_position_ctrl.zul
<zk xmlns:c="client">
	<zscript><![CDATA[	
		import demo.data.Positions;
		Positions ps = new Positions();
	]]></zscript>
	<groupbox sclass="z-demo-config" closable="true">	
		<caption label="Positions" />
		<radiogroup>
			<attribute name="onCheck"><![CDATA[
				selectedPosition = self.getSelectedItem().getValue();
				mailPop.close();
				if (selectedPosition.contains(",")) {
					String[] pos = selectedPosition.split(",");					 
					mailPop.open(pos[0].replace("x=",""),pos[1].replace("y=",""));
				}else{					
					mailPop.open(txb,selectedPosition);
				}
			]]></attribute>
			<vlayout>
				<zk forEach="${ps.positions}">
					<separator bar="true" if="${each.name=='at_pointer'||each.name=='overlap'}" />					
					<radio label="${each.description}" value="${each.name}" checked="true" if="${each.name=='before_start'}" />
					<radio label="${each.description}" value="${each.name}" if="${each.name!='before_start'}" />
				</zk>				
			</vlayout>
		</radiogroup>
	</groupbox>
	
</zk>
Positions.java
package demo.data;

import java.util.ArrayList;
import java.util.List;

public class Positions {
	public List<Position> positions = new ArrayList<Position>();

	public Positions() {
		positions.add(new Position("before_start", "Before Start"));
		positions.add(new Position("before_end", "Before End"));
		positions.add(new Position("end_before", "End Before"));
		positions.add(new Position("end_after", "End After"));
		positions.add(new Position("after_end", "After End"));
		positions.add(new Position("after_start", "After Start"));
		positions.add(new Position("start_after", "Start After"));
		positions.add(new Position("start_before", "Start Before"));
		positions.add(new Position("overlap", "Overlap"));
		positions.add(new Position("overlap_end", "Overlap End"));
		positions.add(new Position("overlap_before", "Overlap Before"));
		positions.add(new Position("overlap_after", "Overlap After"));
		positions.add(new Position("at_pointer", "At Pointer"));
		positions.add(new Position("after_pointer", "After Pointer"));
		positions.add(new Position("x=100, y=100", "Specific Position (x and y = 100px)"));
	}

	public List<Position> getPositions() {
		return positions;
	}

	public static class Position {
		private String name;
		private String description;

		public Position(String name, String desc) {
			this.name = name;
			this.description = desc;
		}

		public String getName() {
			return name;
		}

		public void setName(String name) {
			this.name = name;
		}

		public String getDescription() {
			return description;
		}

		public void setDescription(String description) {
			this.description = description;
		}
	}
}