源碼示例
可能你并不想看我下面的一堆冗長(zhǎng)的說明,想直接查看源碼或者一個(gè)在線示例。下面的鏈接,是我使用 CSS3 的 transition(過渡),opacity(不透明度),pointer-event(指針事件)等屬性創(chuàng)建的一個(gè)功能型模態(tài)框。
你可以點(diǎn)擊它前往 Github 查看源碼: ModalBox-Tutorial
HTML 結(jié)構(gòu)
前端的組件都是由業(yè)務(wù)和交互場(chǎng)景來驅(qū)動(dòng),模態(tài)框也不例外,常見的場(chǎng)景便是進(jìn)行某個(gè)操作,如點(diǎn)擊按鈕,然后顯示一個(gè)模態(tài)框,反饋給用戶或引導(dǎo)用戶去執(zhí)行接下來的交互。一個(gè)模態(tài)框的交互可能會(huì)包含 5 個(gè)步驟:
1. 有一個(gè)按鈕或者鏈接,用戶點(diǎn)擊它來觸發(fā)模態(tài)框的顯示;
2. 模態(tài)框顯示時(shí),會(huì)有一個(gè)透明的遮罩層,遮擋住當(dāng)前整個(gè)視口;
3. 模態(tài)框內(nèi)容會(huì)以非透明色(通常是白色)出現(xiàn)在視口某個(gè)位置(通常是中間);
4. 模態(tài)框內(nèi)容(通常在右上角)會(huì)有一個(gè)“關(guān)閉”標(biāo)志,點(diǎn)擊它會(huì)讓模態(tài)框隱藏;
5. 模態(tài)框內(nèi)容應(yīng)該是根據(jù)實(shí)際業(yè)務(wù)場(chǎng)景所指定的,因此可以為任意結(jié)構(gòu)。

樣式
1. .modalbox 最初是隱藏的;
1. .modalbox 為一個(gè)透明的遮罩層;
2. .modalbox-dialog 為一個(gè)非透明的內(nèi)容層;
3. 點(diǎn)擊 顯示模態(tài)框鏈接 后,.modalbox 會(huì)顯示;
4. 點(diǎn)擊 .modalbox-close-btn 后,.modalbox 會(huì)隱藏;

效果示例

相關(guān)推薦:
BootStrap點(diǎn)擊保存后模態(tài)框自動(dòng)關(guān)閉代碼分享
bootstrap模態(tài)框嵌套、tabindex屬性、去除陰影的方法
兩種Angular彈出模態(tài)框的方式
以上就是HTML5和CSS3制作一個(gè)模態(tài)框?qū)嵗?a href='http://www.49028c.com/tag/xiangxibuzhou_8535_1.html' target='_blank'>詳細(xì)內(nèi)容,其它編程語言
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除,多謝。
新聞熱點(diǎn)
疑難解答