html：自定义遮罩层弹窗（居中）

最新推荐文章于 2023-07-21 14:08:03 发布

手把手入门

最新推荐文章于 2023-07-21 14:08:03 发布

阅读量1k

点赞数 1

分类专栏： css web前端 Vue

本文链接：https://blog.csdn.net/qq_16946803/article/details/118763824

版权

Vue 同时被 3 个专栏收录

56 篇文章 1 订阅

订阅专栏

web前端

37 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML和CSS创建一个带有点击关闭事件的遮罩层和对话框。通过`v-if`指令控制显示，`@click.stop`阻止事件冒泡，以及设置绝对定位和透明度来实现交互效果。CSS部分详细定义了遮罩层和对话框的样式，包括尺寸、位置和透明度。

摘要由CSDN通过智能技术生成

一、html代码html

<div v-if="maskVisible" class="mask_layer" @click="关闭事件">
    <div class="dialog_div" @click.stop><-- @click.stop 不允许触发父级事件 -->
      <div style="display: flex; justify-content: center; align-items: center;width: 100%;height: 100%;">
        内容
      </div>
    </div>
  </div>

注：不触发父级事件的方法可参考：https://www.cnblogs.com/ymm-notes-blog/p/11969358.html

二、css

.mask_layer {
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.4);
    width: 100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
    height: 100%;
    filter: alpha(opacity=60); /*设置透明度为60%*/
    /*opacity: 0.6;*/ /*非IE浏览器下设置透明度为60%*/
    z-Index: 9999;
    .dialog_div {
      position: absolute;
      width: 40%;
      height: 50%;
      top: 25%;
      left: 25%;
      /*background-color: #fff;*/
      /*cursor: pointer;*/ /* 鼠标类型 */
      z-Index: 99999;
      

    }
  }