diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index e8310f1314e..1d114394832 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -2645,29 +2645,6 @@ options.registry.CookiesBar = options.registry.SnippetPopup.extend({
 
         $content.empty().append($template);
     },
-    /**
-     * @override
-     */
-    onTargetShow: async function () {
-        // @see this.onTargetHide
-        this.$target.parent('#website_cookies_bar').show();
-        this._super(...arguments);
-
-    },
-    /**
-     * @override
-     */
-    onTargetHide: async function () {
-        // We hide the parent because contenteditable="true" would force the bar to stay visible in hidden mode.
-        this.$target.parent('#website_cookies_bar').hide();
-        this._super(...arguments);
-    },
-    /**
-     * @override
-     */
-    cleanForSave: function () {
-        this.$target.parent('#website_cookies_bar').show();
-    },
 });
 
 /**
diff --git a/addons/website/static/src/snippets/s_popup/000.js b/addons/website/static/src/snippets/s_popup/000.js
index a0f5a27b787..42ea5f6e419 100644
--- a/addons/website/static/src/snippets/s_popup/000.js
+++ b/addons/website/static/src/snippets/s_popup/000.js
@@ -5,6 +5,58 @@ const config = require('web.config');
 const publicWidget = require('web.public.widget');
 const {getCookie, setCookie} = require('web.utils.cookies');
 
+// TODO In master, export this class too or merge it with PopupWidget
+const SharedPopupWidget = publicWidget.Widget.extend({
+    selector: '.s_popup',
+    disabledInEditableMode: false,
+    events: {
+        // A popup element is composed of a `.s_popup` parent containing the
+        // actual `.modal` BS modal. Our internal logic and events are hiding
+        // and showing this inner `.modal` modal element without considering its
+        // `.s_popup` parent. It means that when the `.modal` is hidden, its
+        // `.s_popup` parent is not touched and kept visible.
+        // It might look like it's not an issue as it would just be an empty
+        // element (its only child is hidden) but it leads to some issues as for
+        // instance on chrome this div will have a forced `height` due to its
+        // `contenteditable=true` attribute in edit mode. It will result in a
+        // ugly white bar.
+        // tl;dr: this is keeping those 2 elements visibility synchronized.
+        'show.bs.modal': '_onModalShow',
+        'hidden.bs.modal': '_onModalHidden',
+    },
+
+    /**
+     * @override
+     */
+    destroy() {
+        this._super(...arguments);
+
+        // Popup are always closed when entering/leaving edit mode (see
+        // PopupWidget), this allows to make sure the class is sync on the
+        // .s_popup parent after that moment too.
+        this.el.classList.add('d-none');
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onModalShow() {
+        this.el.classList.remove('d-none');
+    },
+    /**
+     * @private
+     */
+    _onModalHidden() {
+        this.el.classList.add('d-none');
+    },
+});
+
+publicWidget.registry.SharedPopup = SharedPopupWidget;
+
 const PopupWidget = publicWidget.Widget.extend({
     selector: '.s_popup',
     events: {
diff --git a/addons/website/views/snippets/s_popup.xml b/addons/website/views/snippets/s_popup.xml
index 21e56020167..61493434643 100644
--- a/addons/website/views/snippets/s_popup.xml
+++ b/addons/website/views/snippets/s_popup.xml
@@ -2,6 +2,10 @@
 <odoo>
 
 <template id="s_popup" name="Popup">
+    <!--
+    Note: those popups are saved with the d-none class but this is not part of
+    their XML definition here as that would hurt the drag and drop feature.
+    -->
     <div class="s_popup o_snippet_invisible" data-vcss="001">
         <div class="modal fade s_popup_middle" style="background-color: var(--black-50) !important;" data-show-after="5000" data-display="afterDelay" data-consents-duration="7" data-focus="false" data-bs-backdrop="false" tabindex="-1" role="dialog">
             <div class="modal-dialog d-flex">
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 8ff06c7f7d3..2e548280c0a 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -1882,7 +1882,7 @@
 <!-- Cookie Bar -->
 <template id="cookies_bar" inherit_id="website.layout" name="Cookies Bar">
     <xpath expr="//footer" position="after">
-        <div id="website_cookies_bar" t-if="website.cookies_bar" class="s_popup o_snippet_invisible o_no_save" data-name="Cookies Bar" data-vcss="001" data-invisible="1">
+        <div id="website_cookies_bar" t-if="website.cookies_bar" class="s_popup o_snippet_invisible d-none o_no_save" data-name="Cookies Bar" data-vcss="001" data-invisible="1">
             <div class="modal s_popup_bottom s_popup_no_backdrop o_cookies_discrete"
                  data-show-after="500"
                  data-display="afterDelay"
diff --git a/addons/website_mass_mailing/static/tests/tours/newsletter_popup.js b/addons/website_mass_mailing/static/tests/tours/newsletter_popup.js
index fca661ba188..7da3972553e 100644
--- a/addons/website_mass_mailing/static/tests/tours/newsletter_popup.js
+++ b/addons/website_mass_mailing/static/tests/tours/newsletter_popup.js
@@ -3,6 +3,7 @@ odoo.define("website_mass_mailing.tour.newsletter_popup_edition", function (requ
 
 const tour = require('web_tour.tour');
 const wTourUtils = require('website.tour_utils');
+const newsletterPopupUseTour = require('website_mass_mailing.tour.newsletter_popup_use');
 
 tour.register('newsletter_popup_edition', {
     test: true,
@@ -21,15 +22,10 @@ tour.register('newsletter_popup_edition', {
     ...wTourUtils.clickOnSave(),
     {
         content: "Check the modal has been saved, closed",
-        trigger: 'iframe .o_newsletter_popup',
+        trigger: 'iframe body:has(.o_newsletter_popup)',
         extra_trigger: 'iframe body:not(.editor_enable)',
-        run: function (actions) {
-            const $modal = this.$anchor.find('.modal');
-            if ($modal.is(':visible')) {
-                console.error('Modal is still opened...');
-            }
-        },
-    },
+        run: newsletterPopupUseTour.ensurePopupNotVisible,
+    }
 ]);
 });
 
@@ -38,20 +34,29 @@ odoo.define("website_mass_mailing.tour.newsletter_popup_use", function (require)
 
 const tour = require('web_tour.tour');
 
+function ensurePopupNotVisible() {
+    const $modal = this.$anchor.find('.o_newsletter_popup .modal');
+    if ($modal.length !== 1) {
+        // Avoid the tour to succeed if the modal can't be found while
+        // it should. Indeed, if the selector ever becomes wrong and the
+        // expected element is actually not found anymore, the test
+        // won't be testing anything anymore as the visible check will
+        // always be truthy on empty jQuery element.
+        console.error("Modal couldn't be found in the DOM. The tour is not working as expected.");
+    }
+    if ($modal.is(':visible')) {
+        console.error('Modal should not be opened.');
+    }
+}
+
 tour.register('newsletter_popup_use', {
     test: true,
     url: '/',
 }, [
     {
         content: "Check the modal is not yet opened and force it opened",
-        trigger: '.o_newsletter_popup',
-        run: function (actions) {
-            const $modal = this.$anchor.find('.modal');
-            if ($modal.is(':visible')) {
-                console.error('Modal is already opened...');
-            }
-            $(document).trigger('mouseleave');
-        },
+        trigger: 'body:has(.o_newsletter_popup)',
+        run: ensurePopupNotVisible,
     },
     {
         content: "Check the modal is now opened and enter text in the subscribe input",
@@ -65,13 +70,12 @@ tour.register('newsletter_popup_use', {
     },
     {
         content: "Check the modal is now closed",
-        trigger: '.o_newsletter_popup',
-        run: function (actions) {
-            const $modal = this.$anchor.find('.modal');
-            if ($modal.is(':visible')) {
-                console.error('Modal is still opened...');
-            }
-        },
+        trigger: 'body:has(.o_newsletter_popup)',
+        run: ensurePopupNotVisible,
     }
 ]);
+
+return {
+    ensurePopupNotVisible: ensurePopupNotVisible,
+};
 });