Axure RP Tutorial Axure RP How to Make a Pop-up Window

1. Open the Axure RP8.0 tool normally, as shown below, and create a new RP file.

2. Pull out a rectangular frame and a button from the component library on the blank page. The rectangular frame is to display the content of the homepage, and the button is to pop up a dialog box after clicking. The interface design is as shown in the screenshot below. During use, place the specific content according to the actual needs of your project.

3. Pull out a dynamic panel from the component library on the left and place it on the page. You can place it as needed, or you can set it to be displayed in the center of the page. Please see the instructions in step 10 for the specific setting steps.

4. Double-click the dynamic panel, and the following dialog box will pop up. First define a name for the dynamic panel. This name will be used when setting the visibility. Then click "state1" and another new sub-page will pop up. You can add the specific content of the pop-up box to this page. Please see screenshot 2 for detailed steps.

5. After the above steps, the page effect of the homepage index will be as shown below. Right-click the dynamic panel and set the dynamic panel to hidden. The specific operation is as shown in screenshot 2.

6. Add events for buttons on the page. Select the button, and in the settings panel on the right, double-click the "When mouse clicked" button, as shown in screenshot 1 below. A new use case editing window will pop up on the page. Select "Show/Hide" of the component, find the dynamic panel just now, and set it to display. The specific operation is as shown in the red position in screenshot 2. The setting of this step is very important. Only if this step is set correctly can the window pop up correctly.

7. In the dynamic panel added in step 5, there is also a button. The function of the button is to automatically close the pop-up box after clicking. The setting steps are similar to step 7, except that "show" is changed to "hide". The specific operation is as shown in red in the screenshot.

8. After configuring, click Preview and click the "Open New Window" button on the browser. A new dialog box will pop up as shown in the screenshot below. Click "Close Window" to close the page.

9. After the eighth step, the configuration function of the new window pop-up has been completed. This step will share how to beautify the page. The effect shown in the ninth step is where the designer places the dialog box on the page, and where it pops up. For the sake of beauty, we often need to display the pop-up box in the center of the page. To achieve this function is also very simple, just complete the following steps.

10. On the home page, right-click the dynamic panel, select "Pin to browser" from the pop-up options and click it. In the pop-up dialog box, just configure it according to screenshot 2 below.

11. At this time, preview the page effect, as shown in the screenshot below, and the pop-up box will be displayed in the center of the page.

That's itAxure RPTutorial on how to make a pop-up window, moreAxure RPPlease go to the software related tutorialsHuajun Software Park software tutorial area!

Axure RP Tutorial Axure RP How to Make a Pop-up Window

Related articles

Hot recommendations this week More