一個簡單的操作實作燈箱效果，我們來看看具體的流程是怎樣的。
聲明：
本方法會引起浏覽器性能下降，不到萬不得已沒必要使用。
示範位址：
先決知識：
你可能需要先學會《如何在Axure中使用“循環”》和《Axure監聽器之全局變量監聽器》這兩個知識。
一、準備工作
首先，我們建一個全局變量Lightbox，預設值為0
二、教程-内聯頁
建一個“内聯頁”，放一個按鈕，和一個動态面闆，為了示範友善，動态面闆裡隻放了一張圖檔。
按鈕命名為“開燈”，互動非常簡單，單擊時以燈箱效果顯示動态面闆，“背景顔色”那裡最好有點透明效果。
動态面闆命名為“燈箱”，隐藏起來。同時固定到浏覽器（居中）
互動也隻要設定這兩個就可以：
三、教程-架構頁
建一個“架構頁”，裡面放一個動态面闆，兩個空狀态，再放一個内聯架構，架構目标為“内聯頁”
用來做監聽全局變量Lightbox的動态面闆互動如下：
其中“循環間隔”的時間可自定。
此時，已經實作了全屏的燈箱效果了，但是你多點選幾下會發現：
- 點選内聯頁的遮罩時可以正常取消燈箱效果。
- 點選外部架構頁的遮罩時不能取消燈箱效果。
四、修正
其實我們隻需兩步就可以修正了：
- 在“架構頁”的頁面上建立互動，當滑鼠點選時設定全局變量Lightbox等于0。
- 在“内聯頁”裡對Lightbox進行循環監聽，如果Lightbox等于0，則關掉燈箱效果。
嘗試自己修正一下吧。
本文由 @Jorkin 原創釋出于人人都是産品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協定
該文觀點僅代表作者本人，人人都是産品經理平台僅提供資訊存儲空間服務。