Javascript 在不切换页面滚动条的情况下打开模式

我有这个代码冻结整个背景，而模态元素是可见的

function overlay() {
    $('#container').css({'pointer-events' : 'none', 'opacity' : 0.5});
    $('html').css('overflow-y', 'hidden');
}

它可以工作，但效果非常难看——每次打开/关闭模式时，页面滚动条都会切换并左右移动整个html内容

---

有更好的解决方案吗？

为什么不使用另一个DOM元素，比如说

.overlay

，为它添加一个半透明的背景并显示出来？示例实现：@PankajPhartiyal，我想在打开模式时防止滚动页面。