Css 当模式打开时防止后台滚动（非引导）

我从零开始创建了自己的模态，我想防止模态打开时在后台滚动，我能在网上找到的只是关于引导的东西，这对我没有帮助，因为我的代码不会自动调用“模态打开”，所以

body.modal-open{
溢出：隐藏；
}

不适合我

    <div id="wrapper3">
    <a class="button" href="#openModal-4">
    <img  class="image"src="img/Animation.png">
            <p class="text">Animation</p>

        </a>
        </div>
        <div id="openModal-4" class="modalbg">
          <div class="dialog">
            <a href="#close" title="Close" class="close">X</a>
                <div class="popout">
                        <h1>2D Animation Project</h1>
                        <div>
                        <h2>Project Brief</h2>

                        <a class="modalfullimg"><img src="img/Design/moodboard.png"></a>
                        </div>
                        <h2>Sketches</h2>
                        <a class="modalfullimg"><img src="img/Design/initialsketches.png"></a>


                </div>

            </div>
        </div>

二维动画项目
项目简介
草图

您能否修改您编写的脚本，添加一个类似“modal open”的主体类，以便应用适当的CSS？这似乎是最简单的解决方案，如果你想定制的话