|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
響應(yīng)式彈出DIV層常見(jiàn)效果/模式窗口設(shè)計(jì)
作者:admin 時(shí)間:2021-8-31 16:58:24 瀏覽:彈出DIV層的設(shè)計(jì)在網(wǎng)頁(yè)交互中常常用到，比如注冊(cè)/登錄表單，詳細(xì)信息的顯示等等。今天，我將分享一個(gè)常見(jiàn)的彈出DIV層的效果，是響應(yīng)式的模式彈窗設(shè)計(jì)效果。
實(shí)例介紹
當(dāng)點(diǎn)擊模式按鈕后，彈窗一個(gè)模式窗口（其實(shí)是一個(gè)DIV層），該模式窗口右上角有一個(gè)關(guān)閉按鈕，可以點(diǎn)擊它關(guān)閉彈窗。
窗口的彈出，采用了由小到大的漸變效果；同樣，關(guān)閉窗口時(shí)，采用由大到小直至消失的漸變效果。
彈出的窗口，居于瀏覽器中間位置。
實(shí)例代碼
本實(shí)例代碼很實(shí)用，因?yàn)闊o(wú)需引用外部文件，遷移方便，是用純CSS+Javascript來(lái)實(shí)現(xiàn)的。
CSS
下面代碼定義彈窗的最大寬度，以及邊距。
.modal__dialog {
max-width: 600px;
padding: 1.2rem;
}下面代碼實(shí)現(xiàn)響應(yīng)式按鈕排版。
@media (max-width: 640px) {
.demo-btns .modal__trigger {
margin-bottom: 0.8rem;
}
}下面代碼是關(guān)閉按鈕的樣式，還有鼠標(biāo)懸停(hover)效果。
.demo-close {
position: absolute;
top: 0;
right: 0;
margin: 1.2rem;
padding: 0.6rem;
background: rgba(0,0,0,0.3);
border-radius: 50%;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.demo-close svg {
width: 24px;
fill: #fff;
pointer-events: none;
vertical-align: top;
}
.demo-close:hover {
background: rgba(0,0,0,0.6);
}HTML
<div class="buttons">
<p>
<a href="" data-modal="#modal" class="modal__trigger">Modal 1</a>
<a href="" data-modal="#modal2" class="modal__trigger">Modal 2</a>
<a href="" data-modal="#modal3" class="modal__trigger">Modal 3</a>
</p>
</div>
按鈕的設(shè)計(jì)，其鏈接須加兩屬性，并且命名格式不能變，data-modal="#modal2" ，#modal后面的數(shù)字不能少：2、3、4、5...，class="modal__trigger"。
Javascript
本實(shí)例中，JS實(shí)現(xiàn)的主要是窗口彈出和關(guān)閉的效果變化。
下面代碼可以設(shè)置內(nèi)容相對(duì)于窗體的延遲顯示時(shí)間，單位是毫秒，你可以把它改為0或其他數(shù)字試試看不一樣的效果。
var contentDelay = 400;
總結(jié)
本文介紹了響應(yīng)式彈出DIV層常見(jiàn)效果/模式窗口設(shè)計(jì)，這種彈窗應(yīng)用廣泛，適合用于各種風(fēng)格的網(wǎng)頁(yè)，可以說(shuō)是百搭不挑食。其還有一個(gè)優(yōu)點(diǎn)是代碼不用外掛插件，遷移方便，是純CSS+Javascript實(shí)現(xiàn)。
您可能對(duì)以下文章也感興趣
