html点击按钮弹出窗口在页面中间怎么实现？

Question

类似这样的弹出框

Answer 1

<div class="mask-box"></div>

<div class="dialog-box">

弹窗内容

</div>

通过fixed定位实现, ".mask-box" 模拟背景,".dialog-box"作为弹窗容器，里面写弹窗的内容。

通过控制样式，切换  display:block ;    display: none; 实现点击出现、点击关闭弹窗。

.mask-box{

  /* 切换  display:block ;    display: none;*/

  position: fixed;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  background:rgba(0,0,0,0.7)

  z-index: 98;

}

.dialog-box{

 /* 切换  display:block ;    display: none;*/

  position: fixed;

  left: 50%;

  top: 50%;

  transform: translate(-50%,-50%);

  width: 300px;

  height: 200px;

  background: #fff;

  /* 按实际情况 设置z-index */

  z-index: 98;

}