open a popup on a specific position

asked 2014-02-13 21:45:33 +0800

pjiang gravatar image pjiang
46 2

updated 2014-02-13 21:50:07 +0800

Hi, can somebody help me with the problem of open a popup on a specific position?

I have a toolbarbutton. When it is clicked, a popup will open.

So I tried to use getTop() and getLeft() to get x and y for the toolbarbutton. Thus I could open the popup at the location I want by adding some offset pixels.

However, the getTop() and getLeft() methods both returns null. I do not understand it. Is it supposed to work?

Is there anyway I can use to open a popup on a specific location I want? I know I could use popup.open(x,y). However this method does not take percentage as parameter. I have to give it pixel value. In this way, when browser gets resized, the the popup position will screwed.

Can somebody help? Thank You!

delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted

answered 2014-02-14 03:48:27 +0800

benbai gravatar image benbai
2228 6

top and left are attributes specified by user to adjust the position of toolbarbutton, e.g.

<toolbarbutton left="25px" label="button" id="btn" />

You can use position mechanism to position a popup, please refer to our demo:

ZK Popup Position

You can also listen to onClientInfo event to reposition popup while browser window resize, and override js method to add some custom offset, please refer to the sample below:


<zk xmlns:w="client">
        .pos-class {
            margin-left: 50px;
            margin-top: 50px;
    <window id="win" title="toolbar demo" border="normal" width="300px"
        mode="overlapped" position="center"
            <toolbarbutton left="25px" label="button" id="btn" />
        <popup id="pp">
            <!-- mix position with custom offset override open and afterOpenAnima_ -->
            <attribute w:name="open"><![CDATA[
                function (ref, offset, position, opts) {
                    this.$open(ref, offset, position, opts);
            <attribute w:name="afterOpenAnima_"><![CDATA[
                function (ref, offset, position, opts) {
                    this.$afterOpenAnima_(ref, offset, position, opts);
                    var wgt = this;
                    setTimeout(function () {
                        zk.log('after open');
                    }, 50);


package test;

import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.OpenEvent;
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.Popup;
import org.zkoss.zul.Toolbarbutton;

public class TestComposer extends SelectorComposer {
    Toolbarbutton btn;
    Popup pp;

    boolean _open;
    @Listen ("onClick = #btn")
    public void openPopup (Event event) {
        _open = true;
        pp.open(btn, "end_before");
    // update Popup position by listening onClientInfo and reopen Popup
    @Listen ("onClientInfo = #win")
    public void reopenPopup (Event event) {
        if (_open) {
            pp.open(btn, "end_before");
    // keep open status by listen to onOpen event of Popup
    @Listen ("onOpen = #pp")
    public void onPopupOpen (OpenEvent event) {
        _open = event.isOpen();
link publish delete flag offensive edit

answered 2014-02-14 10:20:47 +0800

MVarun gravatar image MVarun flag of India
268 1 6


Here is some more Reference..


M Varun.

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2014-02-13 21:45:33 +0800

Seen: 104 times

Last updated: Feb 14 '14

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More