HTML部分:
<!-- 弹窗 -->
<div class="dialog" @touchmove.prevent>
<div class="dialog-content">我是弹窗</div>
</div>
其中@touchmove.prevent用来当弹窗出现时禁止背景滑动
CSS部分:
.dialog {
z-index: 1;
position: fixed;
display: flex;
align-items: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
/* 这里防止当用户长按屏幕,出现的黑色背景色块,以及 iPhone 横平时字体的缩放问题 */
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.dialog-content {
z-index: 2;
display: flex;
align-items: center;
width: 80%;
height: 200px;
border-radius: 16px;
margin: 0 auto;
flex-direction: column;
padding-top: 48px;
background-color: #fff;
}
效果如图: