Mockplus Classic
The Popup Panel is one of the most frequently used components. This tutorial will explain how to define a close command for the Popup Panel. Follow this step-by-step tutorial and you will find it’s easy.
1. Close a Popup Panel Automatically
By default, you are able to close a popup window while clicking external area.
There are three options of the Close policy in the component properties panel.
None – It means the Popup Panel will not close automatically no matter where you click on unless you set a close command.
Click external area – It means you are able to close the Popup Panel while clicking external area.
Click anywhere – It means you are able to close the Popup Panel by clicking anywhere.
Tips
What is the content area of Popup Panel?
Actually, it is a virtual rectangle or area.
What is the range of the content area of Popup Panel?
This area is able to fit all the components you added into the Popup Panel.
Figures of the content area of Popup Panel:
2. Define a Close Command Manually
There are two ways to define a close command manually. You can complete this task with simple drag-and-drop or click the ‘+’ icon.
Below is the step-by-step tutorial:
Use drag-and-drop
1) Double click on the Popup Panel to activate the edit mode > then drag the component into the Popup Panel and click on it.
2) Drag the Link Point to link the component to the Popup Panel itself where it is displayed as red background (as shown in the following picture).
3) In the interaction panel, execute the command ‘Close’ in the Params section.
Use ‘+’ icon
1) Double click on the Popup Panel to activate the edit mode > then drag the component into the Popup Panel and click on it.
2) Click on the ‘+’ icon in the interaction panel and a popup window will show > then double click on the Popup Panel and click OK.
3) In the interaction panel, execute the command ‘Close’ in the Params section.
