Prevent content scrolling when modal is open

March 01, 2018

For some reason I always forget this trick. If you open an modal window and need to stop the content behind from scrolling simply add a class to the body that sets the overflow to hidden and the position to fixed or absolute depending on what device you are targeting.

/* For mobile devices use fixed position */

body.modal-open{
    overflow: hidden;
    position: fixed;
}

/* For desktop use absolute instead of fixed position */

@media (min-width: 640px){
    body.modal-open{
        overflow: hidden;
        position: absolute;
    }
}