前言：

有必要先了解以下思路再进行代码的书写

思路

### 其实弹窗实现很简单：    1. 首先准备一个顶层div        将作为弹窗        设置z-index为一个比较大的值，如z-index=30，使其置于顶层；        设置display:none，使初始被隐藏；            2. 添加锚定行为        定义一个a标签，使被点击时弹窗div被锚定，会触发被锚定标签的“当前活动”伪类样式            3. 给弹窗div设置“当前活动”伪类样式，即：弹窗div:target{css}        使其显示：display:block​    4. 给弹窗div添加一个子a标签，用于隐藏窗口        给这个子a标签href="#"当点击后使弹窗div不为当前活动元素，从而使其target伪类样式不生效                ### 另外使整个网页背景虚化：    其实也是主要利用z-index来实现一个图层，该图层尺寸占整个网页窗口尺寸、有一定的透明度、在弹窗div中定义作为其子元素(使具有和弹窗相同的行为)

代码

  html,body{    margin: 0;    padding: 0;    width: 100%;    height:100%;   }  .app{    width: 100%;    height: 100%;   }  .window{    position: fixed;    top: 0;    right: 0;    left: 0;    bottom: 0;    display: none;    background-color: rgba(0, 0, 0, 0.2);    z-index: 20;  /*背景层*/    text-align: center;   }​  .window:target{    display: block;​   }  .window_content{    width: 400px;    height: 400px;    margin: 15% auto;    z-index: 30;  /*置顶窗口层*/    background-color: pink;   }​​​​        
MyWindow
    
hello world
    关闭  ​      弹窗