CSS和JS彈窗是Web開發中常用的功能。在很多情況下，我們需要一個簡單的彈窗提示來讓用戶了解當前的事件或讓用戶決定是否進行某項操作。

對于CSS彈窗，我們可以使用以下代碼：

/* 彈窗的樣式 */
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
z-index: 9999;
}
/* 背景遮罩的樣式 */
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9998;
}

以上代碼可以創建一個彈窗和一個背景遮罩。我們只需要使用JavaScript來顯示和隱藏它們。

對于JS彈窗，我們可以使用以下代碼：

/* 彈窗的樣式 */
.popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
z-index: 9999;
}
/* 背景遮罩的樣式 */
.popup-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9998;
}

以上代碼與CSS彈窗的代碼非常相似，只是在彈窗和背景遮罩的樣式中加入了“display:none;”來隱藏它們。我們需要使用JavaScript來顯示它們。

無論是CSS彈窗還是JS彈窗，它們都是很方便的組件。它們可以用于消息提示、確認對話框、登錄框等等。我們只需要根據不同的需求來修改樣式和JavaScript代碼即可。