本文介紹了使用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 會隱藏;
效果範例
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。