实现弹出框的核心代码是CSS属性display: none;和display: block;。通过将弹出框外层容器设置为display: none;，大家可以在页面加载时隐藏弹出框。当用户点击按钮或链接时，通过JavaScript或纯CSS的方式将外层容器设置为display: block;，就可以展示弹出框。

.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 999;
}
.popup-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 600px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
}

上述代码是一个基本的弹出框样式，包括弹出框外层容器和弹出框内容容器。外层容器.popup使用position: fixed;将其固定在页面上，通过半透明的背景色和z-index属性将其置于最上方。内容容器.popup-content使用绝对定位和transform: translate(-50%, -50%);实现在页面中心显示。

第一种实现方式是使用JavaScript监听按钮点击事件，并在事件处理函数中修改样式来展示弹出框。

var btn = document.getElementById('btn');
var popup = document.getElementById('popup');
btn.addEventListener('click', function() {
popup.style.display = 'block';
});

上述代码通过addEventListener方法监听按钮点击事件，当事件被触发时，将弹出框容器#popup的display属性设置为block，从而实现弹出框的展示。

第二种实现方式是使用纯CSS，通过:target伪类选择器实现弹出框的展示。

点此打开弹出框
弹出框标题
弹出框内容
.popup:target {
display: block;
}

上述代码中，按钮使用锚点链接#popup与弹出框容器.popup关联。通过在样式表中使用:target伪类选择器，当URL中包含#popup时，将.popup容器的display属性设置为block，实现弹出框的展示。

总之，CSS弹出框是一种常见的Web开发技术，使用CSS属性display: none;和display: block;实现。本文介绍了两种不同的实现方式，包括通过JavaScript控制和使用纯CSS。