A simple operation to achieve the lightbox effect, let's take a look at the specific process.
Statement:
This method will cause the performance of the browser to deteriorate, and it is not necessary to use it unless it is absolutely necessary.
Demo address:
Prerequisites:
You may need to learn how to use loops in Axure and Global Variable Listeners for Axure Listeners.
1. Preparations
First, let's create a global variable Lightbox, with a default value of 0
2. Tutorial - Inline Pages
Create an "inline page", put a button, and a dynamic panel, and for the convenience of presentation, only one image is placed in the dynamic panel.
The button is named "Turn on the light", and the interaction is very simple, when clicked, the dynamic panel is displayed in a lightbox effect, and the "background color" is a little transparent there.
The dynamic panel is named "Lightbox" and is hidden. Pin to browser (center) at the same time
Interaction can also be set up with these two:
3. Tutorial - Frame page
Create a "frame page" with a dynamic panel and two empty states, and then an inline frame with the frame target as "inline page"
The dynamic panel interaction used to listen to the global variable Lightbox is as follows:
The time of the Cycle Interval can be customized.
At this point, the full-screen lightbox effect has been achieved, but if you click a few more times, you will find:
- Clicking on the mask of an inline page cancels the lightbox effect as normal.
- Clicking on the mask of an outer frame page does not cancel the lightbox effect.
IV. Modification
In fact, we can fix it in just two steps:
- Create a new interaction on the Frame Page page, and set the global variable Lightbox to 0 when the mouse is clicked.
- Listen to the Lightbox in a loop in the "Inline Page", and if the Lightbox is equal to 0, turn off the Lightbox effect.
Try to fix it yourself.
This article was originally published by @Jorkin on Everyone is a Product Manager and is not allowed to be reproduced without permission
The title image is from Unsplash and is licensed under CC0
The views in this article only represent the author's own, everyone is a product manager, and the platform only provides information storage space services.