CSS3底部彈窗是一種很常見的網(wǎng)站交互設(shè)計(jì)，特別是在需要對(duì)用戶進(jìn)行一些提示或者操作的時(shí)候經(jīng)常會(huì)用到。底部彈窗即是指彈出提示在網(wǎng)頁(yè)底部的一種效果，這種效果使用CSS3實(shí)現(xiàn)，代碼也比較簡(jiǎn)單。 首先，在HTML中添加一個(gè)需要彈出提示的按鈕，代碼如下：

<button id="btn-show-popup">顯示彈出窗</button>

接著，我們需要在CSS文件中添加底部彈窗的樣式代碼，如下所示：

.popup {
position: fixed;	/* 可以控制彈出框在頁(yè)面中的位置 */
bottom: -300px;	/* 控制彈窗在頁(yè)面底部 */
left: 0;			/* 控制彈出框在頁(yè)面左側(cè) */
right: 0;			/* 控制彈出框在頁(yè)面右側(cè) */
width: 100%;		/* 控制彈出框?qū)挾?*/
height: 300px;		/* 控制彈出框高度 */
background-color: #ffffff;	/* 控制彈出框背景色 */
z-index: 99;		/* 控制彈出框在頁(yè)面中的層級(jí) */
transition: bottom .4s ease-out;	/* 控制彈出框顯示動(dòng)畫，此處為從底部向上彈出 */
}
.popup.show {
bottom: 0;		/* 控制顯示彈出框時(shí)的位置 */
}

然后，在JavaScript代碼中為按鈕添加點(diǎn)擊事件，讓其控制彈出框的顯示和隱藏，代碼如下：

var btnShowPopup = document.getElementById('btn-show-popup');
var popup = document.querySelector('.popup');
btnShowPopup.addEventListener('click', function() {
popup.classList.toggle('show');
});

最后，我們把彈出框的內(nèi)容添加到HTML中的.popup元素中即可，如下所示：

<div class="popup">
<p>這是底部彈窗的內(nèi)容。</p>
</div>

這樣，我們就完成了一個(gè)簡(jiǎn)單的CSS3底部彈窗效果。需要注意的是，由于絕大部分瀏覽器都支持CSS3技術(shù)，因此這份代碼也是非常具有兼容性的。