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

布满荆棘的人生 2022-10-04 13:59 190阅读 0赞

一、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][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;
          
    
        }
      }

[https_www.cnblogs.com_ymm-notes-blog_p_11969358.html]: https://www.cnblogs.com/ymm-notes-blog/p/11969358.html

发表评论取消回复

表情：

评论列表（有 0 条评论，190人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui的遮罩层使用出现遮罩层覆盖弹窗情况

layui的遮罩层使用出现遮罩层覆盖弹窗情况代码如下： layer.open({ //layer提供了5种层类型。可传入的值有：0（信息框，默认）

叁歲伎倆/ 2023年07月06日 11:51/ 0 赞/ 7 阅读

相关遮罩层

<view class="pop"> <view class="cont"> 内容 </view> </view> .

深藏阁楼爱情的钟/ 2023年01月11日 13:05/ 0 赞/ 320 阅读

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

一、html代码html <div v-if="maskVisible" class="mask_layer" @click="关闭事件"> <di

布满荆棘的人生/ 2022年10月04日 13:59/ 0 赞/ 191 阅读

相关 js遮罩层弹出框

昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了一定指出呀 <s

待我称王封你为后i/ 2022年08月06日 11:03/ 0 赞/ 306 阅读

相关可以拖动的居中弹出层带遮罩效果

原链接：[http://www.51xuediannao.com/JS/texiao/juzhongtanchu.html][http_www.51xuediannao.co

女爷i/ 2022年07月10日 04:03/ 0 赞/ 205 阅读

相关 [jquery]弹框，遮罩层

之前使用semantic的modal作为遮罩层。出现了一些关乎源代码的bug。所以自己必须要写一个自己的弹框以达到目的： ![这里写图片描述][SouthEast]

拼搏现实的明天。/ 2022年06月03日 04:18/ 0 赞/ 341 阅读

相关解决弹窗遮罩层在拉滚动条发现遮罩层没铺满屏幕的问题

opacity: 0.3; filter: alpha(opacity=30); background-color: gray;

向右看齐/ 2022年05月30日 00:07/ 0 赞/ 182 阅读

相关 JavaScript点击弹出遮罩层

JavaScript点击弹出遮罩层开发工具与关键技术：DW与JS 作者：戴怡斌撰写时间：2019年1月18日下面我

小咪咪/ 2022年03月25日 05:51/ 0 赞/ 482 阅读

相关弹出框的遮罩层

css样式： .shade { // 遮罩层的实现方法 position: fixed; top: 0;

末蓝、/ 2022年02月24日 12:16/ 0 赞/ 417 阅读

相关自定义遮罩层

业务需求，又不想用网上找的。干脆自己写一个。 // obj 中的参数可以自定义。 var app_mask = { init: functi

╰半橙微兮°/ 2022年01月27日 18:09/ 0 赞/ 367 阅读