起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure教程 帶遮罩層的彈出框（9）
示例原型下載：小樓Axure原創元件-帶遮罩層的彈出框
實現目標：
1、?? 點擊按鈕彈出帶遮罩層的對話框；
2、?? 頁面上下左右滾動時，彈出的對話框水平和垂直始終居中。
實現步驟如下：
1、 拖入編輯區2個矩形，并點右鍵—轉換—轉換為動態面板；
2、 雙擊其中一個動態面板設置標簽為“遮罩層”（看個人喜好隨便命名），并雙擊狀態1進入編輯；
3、 點擊狀態1里面的矩形，設置大小與網站頁面大小相同，以便完全遮蓋；然后，設置矩形邊框為“無”；最后設置填充色的透明度為50%（看個人喜好），并選擇填充色為灰色（看個人喜好）；
4、 關閉狀態1編輯頁面，選擇另外一個動態面板，按照第2步命名并進入編輯；
5、 設置里面的矩形為合適大小，并拖入一個按鈕（或者矩形/文本面板）作為關閉按鈕；設置按鈕onclick事件為隱藏遮罩層和當前編輯的這個動態面板；
6、 關閉當前的編輯頁面，再次選擇作為對話框的這個面板—右鍵—編輯選項—固定到瀏覽器…；
7、勾選固定到瀏覽器窗口，水平和垂直都選擇居中，并勾選“保持在前面”；
8、 拖入一個按鈕（或者矩形/文本面板）到編輯區，雙擊輸入文字“登錄”；然后點右鍵—順序—置于底層；設置按鈕onclick事件為顯示遮罩層和對話框這兩個動態面板；
9、 按著ctrl選擇兩個動態面板（或者挨個設置），點右鍵—編輯選項—設為隱藏。
10、 好了，生成原型就能看到效果了。
擴展：固定到瀏覽器選項可以讓動態面板無論頁面怎么滾動，總是停留在一個位置，那么網站兩側的對聯廣告，或者浮在頁面上的一些按鈕、圖片等，都能用這種方式來實現。
本文作者：@小樓；轉載自：Axure原創教程網
新手入門基礎教程目錄
Axure教程 關于Axure rp觸發事件中IF和ELSE IF的使用說明（6）
更多Axure學習技巧：Axure專欄
人人都是產品經理內容運營團隊
評論
這么麻煩，為啥不直接拖個矩形跟彈出框一起編組。“顯示/隱藏”就已經滿足了，還要什么自行車？
額，13年的文章，不好意思…
一晃都快十年了，現在直接在交互那里選擇燈箱效果就行了，Axure9直接都把背景色配好了
合適大小是多大 ??
一般產品經理都不會加鏈接的,更別提動效了,平鋪圖
這個教程愣是看不懂，全靠憑空臆想，你至少給出一個成型案例這樣才好落地好做參照??！建議文字為主，gif圖為輔+成型案例（截圖也行）這樣我想無論是新手還是老手看起來會舒服很多！謝謝
確實看的一頭霧水
教程寫的不夠仔細，自己摸索著倒是能實現。8。0有燈箱效果了，比較不錯。
睇到好郁悶 ?? ，有點亂
講真，說的有點兒亂，這章
我想知道在第一步的時候為什么要拖動兩個矩形然后在轉換成動態模板，為什么不直接拖動兩個動態模板呢
都可以，但是拖矩形轉換動態模板，更便捷，個人習慣而已。
沒會用。。。蛋碎一地，實例也過期了，咋辦？要么我留給郵箱發我下？373600997@qq.com
請問那個遮罩的作用是什么呢？
事例原型下載鏈接失效了，請博主更新一下鏈接。謝謝。。。
zzzzzzzzz
?? 我是完全看不懂。。。
吐槽的人也是醉了，軟件版本不同，使用漢化版本的不同本來就會造成差異，寫教程的人不可能面面俱到，碰到與自己軟件版本不一樣的地方自己動腦想一下百度一下什么的不就好了嗎？如果發現不對的地方在留言里指出也比單純吐槽樓主不用心好多了。u can u up, no can no bb。
截圖太小 看不見 費眼?。。。。。。。。。。。。。。。。。〈笊窨紤]考慮讀者?。。。。。。?！
完全沒必要這么搞！直接顯示效果選為燈箱就行
6.5哪有燈箱效果？
用了很久自己才搞出來 模塊名字太模糊
教程寫的太亂，完全看不懂