<div class="popup">
<div class="popup-content">
<img src="example.jpg" alt="example image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<button class="close-btn">Close</button>
</div>
</div>

接著，我們需要定義CSS樣式來使彈出框顯示在頁面上并設置其樣式。下面是一個簡單的CSS代碼示例：

.popup {
display: none; /* 初始狀態隱藏 */
position: fixed; /* 相對于視口固定定位 */
top: 50%; /* 距離頁面頂部50%的位置 */
left: 50%; /* 距離頁面左側50%的位置 */
transform: translate(-50%, -50%); /* 水平和垂直居中 */
background-color: #ffffff; /* 背景色為白色 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* 添加陰影效果 */
z-index: 999; /* 放在最上層 */
}
.popup-content {
padding: 20px; /* 內邊距 */
text-align: center; /* 文本居中 */
}
.close-btn {
border: none; /* 去掉邊框 */
outline: none; /* 去掉焦點樣式 */
background-color: #dddddd; /* 背景色為灰色 */
padding: 10px 20px; /* 按鈕內邊距 */
cursor: pointer; /* 鼠標指針變成手型 */
margin-top: 20px; /* 按鈕上邊距 */
}

最后，我們需要使用JavaScript來實現彈出框的顯示和隱藏功能。下面是一個示例代碼：

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

以上就是使用CSS和JavaScript實現彈出框的基本步驟。根據需要，我們還可以在彈出框中添加更多內容和樣式來滿足具體的設計要求。