JS彈窗是Web開發中常用的一個功能，能夠彈出提示信息、確認框以及輸入框等，給用戶更好的體驗。CSS可以讓彈窗更美觀，讓用戶更加愉悅地使用網站。

下面是一個JS彈窗的基礎代碼：

function openDialog(message){
alert(message);
}
openDialog("Hello world!");

上面的代碼會彈出一個帶有"Hello world!"文字的提示框，這就是JS彈窗最基本的用法。但是默認樣式不太美觀，我們需要用CSS來進行美化。

下面是一個帶有樣式的JS彈窗代碼：

<style>
.dialog{
position: fixed;
width: 300px;
height: 150px;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -150px;
background-color: white;
border: 1px solid #ccc;
box-shadow: 0px 0px 10px 0px #ccc;
}
.dialog-header{
height: 30px;
line-height: 30px;
background-color: #f5f5f5;
border-bottom: 1px solid #ccc;
font-weight: bold;
padding: 0 10px;
}
.dialog-body{
padding: 10px;
}
.dialog-footer{
text-align: right;
height: 30px;
line-height: 30px;
background-color: #f5f5f5;
border-top: 1px solid #ccc;
padding: 0 10px;
}
</style>
<div class="dialog">
<div class="dialog-header">
提示
</div>
<div class="dialog-body">
<p>Hello world!</p>
</div>
<div class="dialog-footer">
<button onclick="closeDialog()">關閉</button>
</div>
</div>
<script>
function openDialog(){
document.querySelector('.dialog').style.display = 'block';
}
function closeDialog(){
document.querySelector('.dialog').style.display = 'none';
}
openDialog();
</script>

上面的代碼會彈出一個帶有樣式的彈窗，包含標題、內容、按鈕等。在JS代碼部分，我們使用document.querySelector來獲取節點，并改變其樣式。

通過CSS和JS的結合，我們可以實現更美觀、更實用的JS彈窗功能，豐富用戶體驗。