diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index b8d74a2676309378076a1f8cb75366e0791a0d89..35c2ceafea9c7f4fbc625fe177c65ef2231795ce 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -1271,7 +1271,21 @@ header {
 
 @if index(('slideout_slide_hover', 'slideout_shadow'), o-website-value('footer-effect')) {
     @include media-breakpoint-up(lg) {
-        #wrapwrap.o_footer_effect_enable {
+        // This effect is disabled when a modal is opened. This is the easiest
+        // and probably most stable solution for this problem:
+        // - Add a popup in your page and select it to be for "All pages"
+        //   => In that case it ends up in the footer of your page
+        // - Enable the "Slide Hover" effect for your footer
+        //
+        // => In that case, when the popup opens, it is not visible because of
+        // the footer z-index ("Slide Hover" effect) and it actually also
+        // prevents the user to scroll.
+        //
+        // TODO in master, we may want to put such popups elsewhere than in the
+        // footer. When the footer is hidden, this is also a problem: the popup
+        // for all pages cannot be visible ever. This is considered a limitation
+        // in stable versions though.
+        body:not(.modal-open) #wrapwrap.o_footer_effect_enable {
             > main {
                 @if o-website-value('layout') == 'full' {
                     // Ensure a transparent snippet at the end of the content