Prevent background scrolling when overlay appears
One approach is hidden the overflow of the body element.
like this:
body.modal-open{
overflow:hidden;
}
so in this case when you popup the modal you add a class to body and then when you close it you remove that class.
another approach is using a javascript to disable the scroll like this:
document.documentElement.style.overflow = 'hidden';
document.body.scroll = "no";
and then return it with
document.documentElement.style.overflow = 'scroll';
document.body.scroll = "yes";
When you open the modal, you can add overflow: hidden;
to the body's style.
Or,
body.modal-opened {
overflow: hidden;
}
And add modal-opened
class to the body when opening and remove when you close the dialog.