HTML5和CSS3製作一個模態框實例

本文主要和大家介紹了使用HTML5和CSS3製作一個模態框的範例的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

原始碼範例

可能你不想看我下面的一堆冗長的說明，想直接查看原始碼或一個線上範例。下面的鏈接，是我使用 CSS3 的 transition（過渡），opacity（不透明度），pointer-event（指針事件）等屬性創建的一個功能型模態框。

你可以點擊它前往Github 查看原始碼： ModalBox-Tutorial

#HTML 結構

前端的元件都是由業務和互動場景來驅動，模態框也不例外，常見的場景是進行某個操作，如點擊按鈕，然後顯示一個模態框，回饋給使用者或引導使用者去執行接下來的互動。一個模態框的交互可能會包含5 個步驟：

1. 有一個按鈕或鏈接，用戶點擊它來觸發模態框的顯示；

2. 模態框顯示時，會有一個透明的遮罩層，遮擋住目前整個視窗；

3. 模態框內容會以非透明色（通常是白色）出現在視窗某個位置（通常是中間）;

4. 模態框內容（通常在右上角）會有一個「關閉」標誌，點擊它會讓模態框隱藏；

5. 模態框內容應該是根據實際業務場景所指定的，因此可以為任意結構。

樣式

1. .modalbox 最初是隱藏的;

1.  .modalbox  為透明的遮罩層；

2. .modalbox-dialog 為非透明的內容層;

3. 點選顯示模態框連結後，.modalbox 會顯示;

4. 點選  . modalbox-close-btn 後，.modalbox 會隱藏；

效果範例

##相關推薦：

BootStrap點選儲存後模態方塊自動關閉程式碼分享

#bootstrap模態方塊嵌套、tabindex屬性、移除陰影的方法

兩種Angular彈出模態框的方式#

以上是HTML5和CSS3製作一個模態框實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！