css实现弹窗上下左右居中且背景透明锁定窗口效果

下面是详细的攻略，过程中会有两个示例说明。

首先，要实现弹窗上下左右居中，我们需要在css中使用绝对定位和transform属性来控制它的位置。代码如下：

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这里，我们使用position:fixed属性来让弹窗固定在页面上，使用top和left属性将其移动到页面中间，最后使用transform属性对其进行微调，使得其完全居中。

接下来，我们需要将背景设置为透明，并且锁定窗口。这可以通过在html和body元素上设置背景色和透明度来实现。具体代码如下：

html,
body {
  height: 100%;
  background-color: #000000;
  opacity: 0.5;
  overflow: hidden;
}

这里设置了html和body元素的高度为100%，background-color为黑色，opacity为0.5，这样就可以实现半透明的背景效果。同时，使用overflow属性将窗口锁定，防止滚动页面。

接着我们来看两个示例。

示例一：

<div class="modal">
  <p>这是一个弹窗</p>
</div>

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 100px;
  background-color: #ffffff;
  z-index: 9999;
}
html,
body {
  height: 100%;
  background-color: #000000;
  opacity: 0.5;
  overflow: hidden;
}

在这个示例中，我们创建了一个class为modal的div元素，并设置了其高度和宽度。使用上述CSS代码，我们将其放置在页面中心，并设置了背景透明且锁定窗口。

示例二：

<div class="modal">
  <p>这是一个弹窗</p>
</div>

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 200px;
  height: 100px;
  background-color: #ffffff;
  z-index: 9999;
}
html,
body {
  height: 100%;
  background-color: #000000;
  opacity: 0.5;
  overflow: hidden;
}

在这个示例中，我们使用了margin: auto属性，来将元素在水平和垂直方向上居中。同时，使用了top、left、right和bottom属性将其放置在页面四个方向上，并设置其高度和宽度。最后，设置背景透明并锁定窗口。

以上就是完成这个效果的完整攻略和两个示例说明，希望能对你有所帮助。