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