首先需要一个大盒子
<div id="box1"></div>
接着把盒子设置为固定位置并且平铺整个页面，将left，top设置为0，将width和height设置为100%，再为它设置半透明背景：
<style type="text/css">#box1{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(200,200,200,0.5);}</style>
于是我们就获得了以下效果：
然后，我们再在大盒子中创建一个小盒子并填充内容 ：
<div id="box2"><div id="close">X</div><p>这是一个窗口</p></div>
为小盒子添加样式：
#box2{position: absolute;background-color: white;top: 50%;left: 50%;width: 300px;height: 200px;transform: translate(-50%,-50%);text-align: center;}#close{position: absolute;width: 25px;height: 25px;text-align: center;top: 0px;right: 0px;color: blue;border: 1px solid black;}
效果：
可以为这个盒子添加一些事件，使得用户点击X号可以关闭小窗口：
<script type="text/javascript">window.onload = function(){var box2 = document.getElementById('box2');var closeB = document.getElementById('close');closeB.addEventListener('click',(e)=>{e.stopPropagation();box2.style.display = 'none'})}</script>
