0

ZK how to close popup window by click in outside without clicking close button ?

asked 2015-08-03 18:18:40 +0800

toanit gravatar image toanit
1

I am showing some Images in a popup window and I want to close that window after click in outside. Is there any way to close that window without clicking any button? Thanks in advance!!

delete flag offensive retag edit

3 Answers

Sort by ยป oldest newest most voted
0

answered 2015-08-11 15:44:31 +0800

ifmis gravatar image ifmis
1 2

Hello toanit,

Unless you are looking for other thing, but when you set the mode of your window to popup, no need to click the close button.

<window id="popup" vflex="1" border="none" width="50%" mode="popup">
....... your code here ..........
</window>

NB: The window is not REMOVED from your ID Space but it is closed, not visible. So if you want to open it again, you have to intercept the event and check yourself if this component by that ID is unique, if yes, set focus on it otherwise create it.

If you got stack, let me know.

Thanks.

Emma.

link publish delete flag offensive edit
0

answered 2015-09-03 15:27:13 +0800

jgodoy gravatar image jgodoy
1

how capture event when click out popup ?

link publish delete flag offensive edit
0

answered 2015-09-04 09:19:21 +0800

cyiannoulis gravatar image cyiannoulis
1181 10

Have a look in the following example a simple toggle popup and a more advanced one:

<?page title="Main" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Main" 
        border="none" height="100%" width="100%"  
        apply="org.zkoss.bind.BindComposer" 
        viewModel="@id('vm') @init('popup.MainVM')">
<vlayout>
    <!-- SIMPLE EMBEDDED POPUP -->
    <a label="Simple Popup" popup="simplePopup, type=toggle, position=after_start"></a>

    <popup id="simplePopup">
        <include src="popwin.zul" />
    </popup>

    <!-- ADVANCED DYNAMIC POPUP -->
    <a label="Advanced Popup" onClick="@command('openPopup', parent-component=self)" />

    <popup id="advancedPopup" />

</vlayout>

</window>
</zk>

A simple content for the popups (popwin.zul):

<?page title="Popup Window" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Popup Window" border="none" width="200px" height="250px">

</window>
</zk>

And the main view model class:

public class MainVM {

   @Command
   public void openPopup(@SelectorParam("#advancedPopup") Popup popup, 
                         @BindingParam("parent-component") Component parentComponent) 
   {
        /*
         * Discard any previous content
         */
        if (popup.getFirstChild() != null )
            popup.getFirstChild().detach();

        Executions.createComponents("popwin.zul", popup, null); 
        popup.open(parentComponent, "after_start");
    }
}

Hope that helps.

Costas

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

Follow
1 follower

RSS

Stats

Asked: 2015-08-03 18:18:40 +0800

Seen: 79 times

Last updated: Sep 04 '15