CSS怎么實現彈窗？

CSS是前端開發中常用的樣式語言，除了設置字體大小、顏色、背景圖片等常規樣式外，還可以通過CSS實現彈窗效果。

首先，在HTML文件中添加一個按鈕：

<button id="btn">點擊彈窗</button>

接下來在CSS中添加樣式：

/* 彈窗遮罩層 */
#bg{  
position: fixed;  
top: 0;  
left: 0;  
width: 100%;  
height: 100%;  
z-index: 999;  
background: rgba(0, 0, 0, .6);  
display: none;  
}  
/* 彈窗容器 */
#popup{  
position: fixed;  
top: 50%;  
left: 50%;  
width: 300px;  
margin-left: -150px;  
height: 200px;  
margin-top: -100px;  
z-index: 1000;  
background: #fff;  
border: 1px solid #ccc;  
border-radius: 5px;  
padding: 30px 20px;  
box-shadow: 0 0 5px #666;  
display: none;    
}

這里我們使用了兩個容器，一個是彈窗的遮罩層(bg)，另一個是彈窗本身(popup)。

最后，在JS中添加事件監聽，控制彈窗的顯示和隱藏：

var bg=document.getElementById('bg');  
var popup=document.getElementById('popup');  
var btn=document.getElementById('btn');
btn.onclick=function(){  
bg.style.display='block';  
popup.style.display='block';  
}  
bg.onclick=function(){  
bg.style.display='none';  
popup.style.display='none';  
}

當點擊按鈕時，彈窗的遮罩層和容器都將顯示出來。當用戶點擊遮罩層時，彈窗會消失。

以上是使用CSS實現彈窗的方法，你可以根據自己的需求，對彈窗的樣式進行相應的調整。