CSS彈出框是網頁設計中經常使用的一種樣式效果，在頁面中彈出框可以增加頁面的交互性。這里將介紹如何使用CSS實現一個彈出框在頁面底部的效果。

.pop-up {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
background-color: #fff;
transition: transform 0.3s ease-in-out;
transform: translateY(100%);
box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5);
}
.pop-up.open {
transform: translateY(0);
}

首先定義一個類.pop-up，這個類將作為彈出框的樣式。這里我們設置樣式的位置為fixed，即不隨頁面滾動而變化，底部距離頁面底部為0，向左充滿整個頁面，寬度為100%，高度為150px，背景色為白色。然后定義了一個過渡效果，當彈出框打開時，會有從底部向上移動的動畫效果，時間為0.3s，緩動方式為ease-in-out。然后我們將彈出框通過transform屬性向下平移100%，即完全隱藏在頁面底部。最后添加一個陰影效果，形成立體感。

接下來使用JS來控制彈出框的打開和關閉：

var btn = document.querySelector('.btn');
var popUp = document.querySelector('.pop-up');
function togglePopUp() {
popUp.classList.toggle('open');
}
btn.addEventListener('click', togglePopUp);

這里通過querySelector方法獲取到按鈕和彈出框的DOM元素。我們定義togglePopUp函數，當執行這個函數時，彈出框的open類將會被添加或刪除，以實現彈出框的打開和關閉。最后將這個函數綁定到按鈕的click事件中，當按鈕被點擊時，執行這個函數從而呼出彈出框。

通過CSS和JS來實現網頁中的彈出框是十分常見的技術，可以充分增加網頁的交互性和功能，給用戶帶來更好的使用體驗。