jq封装蒙层小插件，蒙层滑动页面不滑动

迈不过友情╰ 2022-04-03 14:28 191阅读 0赞

蒙层用的挺多的，有些东西需要设置也挺繁琐的，封装成一个小方法以供下次方便使用。

(function () {
       function Init (options) {
          this.bodyEl = document.body;
          this.tops = 0;
          this.state = options.state || 'hide';
          this.cartoon = options.cartoon || 'fade';
          this.parent = options.parent;
          this.bindEvent ();
       }
       Init.prototype.bindEvent = function () {
          if (this.state === 'hide') {
             if (this.cartoon === 'fade') {
                this.parent.fadeOut();
             } else {
                this.parent.slideUp();
             }
             //蒙层取消，让页面可以滑动恢复正常
             this.bodyEl.style.position = '';
             this.bodyEl.style.top =  '';
             window.scrollTo(0, this.tops);
          } else {
             if (this.cartoon === 'fade') {
                this.parent.fadeIn();
             } else {
                this.parent.slideDown();
             }
             //蒙层滑动防止页面跟着滑动
             this.tops = window.scrollY;
             this.bodyEl.style.position = 'fixed';
             this.bodyEl.style.left = '0px';
             this.bodyEl.style.right = '0px';
             this.bodyEl.style.top = -this.tops + 'px';
          }
       }
       
       $.fn.extend({
          mark: function (options) {
             options.parent = this;
             new Init (options);
          }
       })
    }())

调用

$('.mark-box').mark({
       state: 'hide',  //或者‘show’
       cartoon: 'fade'  //或者'slide'
    })

一般我用的样式如下

.mark-box {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                background-color: rgba(0, 0, 0, 0.1);
                width: 100%;
                height: 100%;
                z-index: 100000;
            }
    .content-box {
                background-color: rgba(255, 255, 255, 0.9);
                width: 80%;
                height: 100px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateY(-50%) translateX(-50%);
                box-shadow: 0px 7px 8px -5px #fff;
                border-radius:8px;
            }

事件

$('.mark-box').click(function () {
                    $('.mark-box').mark({
                        state: 'hide',
                        cartoon: 'fade'
                    })
                    isMark = !isMark;
     });
     $('.content-box').click(function (e) {
                    e.stopPropagation();
    });

发表评论取消回复

表情：

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

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

相关阅读

相关 Js或者jQuery实现点击图片出现蒙层并将图片放大在蒙层上------Sestid

们先看一个比较简单的（用jQuery实现）示例图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_a...

小鱼儿/ 2024年04月18日 20:44/ 0 赞/ 53 阅读

相关 Element嵌套弹框蒙层混乱处理

可以在第二层的弹框上面绑定 append-to-body 属性 <el-dialog class="body-dialog"

怼烎@/ 2023年07月09日 06:28/ 0 赞/ 6 阅读

相关 android 渐变蒙版_Flutter新手引导蒙版（浮层）

题记 —— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。重要消息 f lutter中网络请求dio使用分析视频教程在这里 Flutter 从入

Bertha 。/ 2023年01月02日 03:21/ 0 赞/ 300 阅读

相关万能给任何页面加蒙层！！！

依旧废话不多说，直接上代码 var searchMask = document.getElementById('InputSearchMask'); se

红太狼/ 2022年12月21日 13:58/ 0 赞/ 135 阅读

相关 vue-解决弹出蒙层滑动穿透问题（IOS穿透）

【实现思路】　　1. vue提供的 @touchmove.prevent 可以用来阻止滑动，但是这个方法会对其内的子div的滑动事件也禁止掉了，这样会导致中间文字无法滑动。

小鱼儿/ 2022年11月25日 10:16/ 0 赞/ 756 阅读

相关 vue弹出层滑动禁止背景跟着滑动_解决：vue 弹窗滑动底部页面跟着滑动

解决：在弹窗的外层div上添加时间 @touchmove.prevent即可但是这种方法会导致弹窗无法滚动经测试：此方法只适用弹窗不需要滚动的情况若想弹窗滚动，

淩亂°似流年/ 2022年10月26日 14:10/ 0 赞/ 564 阅读

相关 PS学习笔记----图层蒙版

图层蒙版：用以控制画面的显示和隐藏，从而实现图像的合成等操作。操作： 1.选中图层 2.单击“添加图层蒙版”按钮。 “蒙版

小鱼儿/ 2022年08月04日 12:38/ 0 赞/ 250 阅读

相关 jq封装蒙层小插件，蒙层滑动页面不滑动

蒙层用的挺多的，有些东西需要设置也挺繁琐的，封装成一个小方法以供下次方便使用。 (function () { function Init (option

迈不过友情╰/ 2022年04月03日 14:28/ 0 赞/ 192 阅读

相关 jq 拼图滑动验证插件jq_slideImage

git 插件下载地址 [https://github.com/chen9091/jq\_slideImage][https_github.com_chen9091_jq_sli

悠悠/ 2022年03月22日 01:51/ 0 赞/ 271 阅读

相关微信小程序 - vant popup弹出层阻止底层页面滑动

前言在小程序编写过程中使用使用vant weapp的popup组件做小程序的弹出层，触屏导致底层页面跟着滑动。解决方法使用touch事件阻止

Myth丶恋晨/ 2021年07月26日 16:53/ 1 赞/ 1563 阅读