一個簡單的操作實現(xiàn)燈箱效果，我們來看看具體的流程是怎樣的。

聲明：

本方法會引起瀏覽器性能下降，不到萬不得已沒必要使用。

演示地址：

https://usrsky.axshare.com/#id=4wugsh&g=1

先決知識：

你可能需要先學會《如何在Axure中使用“循環(huán)”》和《Axure監(jiān)聽器之全局變量監(jiān)聽器》這兩個知識。

一、準備工作

首先，我們建一個全局變量Lightbox，默認值為0

二、教程-內(nèi)聯(lián)頁

建一個“內(nèi)聯(lián)頁”，放一個按鈕，和一個動態(tài)面板，為了演示方便，動態(tài)面板里只放了一張圖片。

按鈕命名為“開燈”，交互非常簡單，單擊時以燈箱效果顯示動態(tài)面板，“背景顏色”那里最好有點透明效果。

動態(tài)面板命名為“燈箱”，隱藏起來。同時固定到瀏覽器（居中）

交互也只要設置這兩個就可以：

三、教程-框架頁

建一個“框架頁”，里面放一個動態(tài)面板，兩個空狀態(tài)，再放一個內(nèi)聯(lián)框架，框架目標為“內(nèi)聯(lián)頁”

用來做監(jiān)聽全局變量Lightbox的動態(tài)面板交互如下：

其中“循環(huán)間隔”的時間可自定。

此時，已經(jīng)實現(xiàn)了全屏的燈箱效果了，但是你多點擊幾下會發(fā)現(xiàn)：

• 點擊內(nèi)聯(lián)頁的遮罩時可以正常取消燈箱效果。
• 點擊外部框架頁的遮罩時不能取消燈箱效果。

四、修正

其實我們只需兩步就可以修正了：

1. 在“框架頁”的頁面上新建交互，當鼠標點擊時設置全局變量Lightbox等于0。
2. 在“內(nèi)聯(lián)頁”里對Lightbox進行循環(huán)監(jiān)聽，如果Lightbox等于0，則關掉燈箱效果。

嘗試自己修正一下吧。