Modal dialog 当modal打开时禁用overscroll

目前我正在做模态弹出，但当我打开它，我可以滚动屏幕，我想这是不可能的，我尝试了位置：固定和溢出：隐藏，但我没有成功

HTML:

JS:

我尝试了javascript，但除了它停止工作之外，它没有工作，我不知道问题出在哪里

      <div id="modal-button" data-modal="modal-zoom-in"><a href="#">Open</a></div>
<div class="modal-background"></div>
 <div id="modal-zoom-in" class="modal"></div>

.modal {
position: absolute;
width: 300px;
height: 300px;
background: var(--dark-mode-darked);
color: #fff;
text-align: left;
transform-style: preserve-3d;
}

.modal-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(33, 38, 47, 0.75);
opacity: 0;
pointer-events: none;
}

.modal-background.show {
display: block;
opacity: 1;
pointer-events: auto;
animation: fadein 0.8s;
}

.modal-background.hide {
animation: fadeout 0.8s;
}

@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

#modal-zoom-in {
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: all 0.4s;
}
#modal-zoom-in.show {
transform: translate(-50%, -50%) scale(1);
transition: all 0.4s;
}

    (function($) {
    $('.tabbar #modal-button').on('click', function() {
    $('.modal-background').addClass('show').removeClass('hide');
    $('#'+$(this).data('modal')).addClass('show').removeClass('hide');
    });

    $('.modal-background').on('click', function(e) {
    e.preventDefault();
    $(this).removeClass('show').addClass('hide');
    $('.modal.show').removeClass('show').addClass('hide');
    });

    $('.modal').on('click', function(e) {
    e.preventDefault();
    });
    })(jQuery);