這是目前最高效的Modal實現(xiàn)方式，希望對你有用，enjoy~

Modal簡介

彈窗、對話框、浮層，我們在網(wǎng)頁中會經(jīng)?？吹竭@些元件。這類元件統(tǒng)稱為Modal（模態(tài)對話框）。Modal一般使用在如下場景：需要用戶處理事務，又不希望跳轉(zhuǎn)頁面以致打斷工作流程時，可以使用?Modal?在當前頁面正中打開一個浮層，承載相應的操作。

特性

如下圖所示，這是一個最常規(guī)的Modal。

Modal通常呈現(xiàn)出以下幾個特點：

1、居中

Modal居中顯示，明確告知用戶當前內(nèi)容必須進行處理。

2、遮罩

將Modal外的內(nèi)容遮罩，引導用戶的視覺焦點到Modal上。

3、需手動關(guān)閉

Modal是模態(tài)對話框，是必須要用戶做出操作才能繼續(xù)進行下去的。

原型設計

在原型設計的過程中，pm能夠高效地實現(xiàn)Modal的制作，是很重要的。

高效的具體表現(xiàn)為：元件要少、用例要少、復用性高、邏輯清晰。

如下圖所示，這是一個Modal的高效實現(xiàn)方法。（預覽地址：https://c5zu4k.axshare.com）

該方法使用了3個按鈕，1個動態(tài)面板，實現(xiàn)了3個Modal的。無論再添加幾個按鈕和Modal，始終只需要原來的一個動態(tài)面板，也無需添加新的用例。

如何設置

1、添加3個按鈕,名稱如下圖。添加1個動態(tài)面板（設置為隱藏），設置4個狀態(tài)，名稱如下圖。

2、右擊動態(tài)面板，勾選“自動調(diào)整為內(nèi)容尺寸”和”固定到瀏覽器“，設置見下圖。

3、為按鈕添加用例

4、為動態(tài)面板添加用例

5、在動態(tài)面板的狀態(tài)（除去State1）內(nèi)添加內(nèi)容，為操作按鈕（確定、取消）添加用例。

6、大功告成，在瀏覽器內(nèi)預覽即可查看效果。

如何復用

如需在此基礎上添加更多的按鈕和Modal，可以按一下方式操作：

新增一個按鈕，名稱設置為Button4；復制動態(tài)面板的Button3狀態(tài)，新的狀態(tài)名稱設置為Button4，修改Button4中的內(nèi)容為自己想要的內(nèi)容即可。

這樣的復用，無需新增動態(tài)面板，也無需新增用例，在添加多個Modal時會十分高效。

知識點解析

1、自動調(diào)整為內(nèi)容尺寸

動態(tài)面板的屬性。動態(tài)面板內(nèi)會有多個狀態(tài)，每個狀態(tài)內(nèi)的內(nèi)容大小不一，勾選此項后，動態(tài)面板能夠根據(jù)當前的狀態(tài)自動調(diào)整尺寸。

2、固定到瀏覽器窗口

動態(tài)面板的屬性。設置此項后，動態(tài)面板能夠脫離頁面的限制，始終固定在瀏覽器的某個位置。彈窗提示、通知等元件，需要固定顯示位置，使用此項能夠完美實現(xiàn)需求。

3、燈箱效果

顯示動態(tài)面板時的效果。設置此項后，動態(tài)面板在顯示時，會自動將頁面其余內(nèi)容遮罩，能夠?qū)崿F(xiàn)彈窗的樣式效果。

好了，本文到此就全部完成了。這樣的實現(xiàn)方式，是我目前找到的最高效的Modal實現(xiàn)方式。之前在不斷探索的過程中，也使用了很多其他的方法，結(jié)果導致頁面元件混亂、邏輯不清晰、復用性差，現(xiàn)在看來是比較可笑的。希望本文中的方法能夠?qū)Υ蠹矣兴鶐椭?/p>

（原型下載：https://pan.baidu.com/s/1snsPpSD）

我目前專注于后臺產(chǎn)品的設計，以后會逐步將自己的一些工作經(jīng)驗分享出來，也希望和大家一起討論和成長。接下來的一篇，打算寫一些表格的規(guī)范和設計。大家有想要了解的內(nèi)容，留言哦！

本文由 @流風 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。