以下是一个纯JS实现的Popup框：
HTML代码：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Popup框</title>
<style>
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 300px;
background-color: white;
padding: 20px;
display: none;
}
</style>
</head>
<body>
<button id="open-btn">打开Popup框</button>
<div id="overlay"></div>
<div id="popup">
<h2>Popup框标题</h2>
<p>Popup框内容</p>
<button id="close-btn">关闭</button>
</div>
<script src="popup.js"></script>
</body>
</html>
```
JavaScript代码（popup.js）：
```js
// 获取DOM元素
const overlay = document.getElementById('overlay');
const popup = document.getElementById('popup');
const openBtn = document.getElementById('open-btn');
const closeBtn = document.getElementById('close-btn');
// 打开Popup框
openBtn.addEventListener('click', function() {
overlay.style.display = 'block';
popup.style.display = 'block';
});
// 关闭Popup框
closeBtn.addEventListener('click', function() {
overlay.style.display = 'none';
popup.style.display = 'none';
});
```
该Popup框使用了一个遮罩层（`overlay`）和一个弹出层（`popup`），并通过JavaScript控制它们的显示和隐藏。点击“打开Popup框”按钮时，遮罩层和弹出层都会显示出来；点击弹出层的“关闭”按钮时，遮罩层和弹出层都会隐藏起来。可以根据实际需要调整Popup框的样式和内容。