[IMP] website: improve "Popup" snippet

Review the layout to always use standard bootstrap classes so that
future task targeting modal can target s_popup snippets the same way
(for example: our task allowing to open a popup on click on a button).

This also allows to simplify the css and simplify the options. A new
option also now allows to have a backdrop, or not, so that user clicks
are blocked while the popup is opened, or not.

+ Adapt cookie bar accordingly.

Part of https://github.com/odoo/odoo/pull/52698
task-2210730

Co-authored-by: qsm-odoo <qsm@odoo.com>

13 files changed, 274 insertions, 164 deletions

diff --git a/addons/website/data/website_data.xml b/addons/website/data/website_data.xml
index a3ab74c5f1d..dc850766c28 100644
--- a/addons/website/data/website_data.xml
+++ b/addons/website/data/website_data.xml
@@ -684,6 +684,12 @@
             <field name="type">url</field>
             <field name="url">/website/static/src/img/snippets_demo/s_team_member_2.png</field>
         </record>
+        <record id="website.s_popup_default_image" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">s_popup_default_image.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_popup.jpg</field>
+        </record>
     </data>
     <data>
         <record id="group_multi_website" model="res.groups">
diff --git a/addons/website/static/src/img/snippets_demo/s_popup.jpg b/addons/website/static/src/img/snippets_demo/s_popup.jpg
new file mode 100644
index 00000000000..3043903ef0b
--- /dev/null
+++ b/addons/website/static/src/img/snippets_demo/s_popup.jpg
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index d1d3365c67b..88a00678336 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1806,7 +1806,7 @@ options.registry.CookiesBar = options.registry.SnippetPopup.extend({
             websiteId: websiteId,
         }));
 
-        const $content = this.$target.find('.s_popup_content');
+        const $content = this.$target.find('.modal-content');
         const selectorsToKeep = [
             '.o_cookies_bar_text_button',
             '.o_cookies_bar_text_policy',
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index dc843fd148f..b916b232a85 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -150,21 +150,12 @@ table.editorbar-panel {
 }
 
 // s_popup in edit mode
-.editor_has_snippets {
-    .s_popup_main {
-        z-index: 1000 !important;
-        left: $o-we-sidebar-width !important;
-        top: var(--o-we-toolbar-height) !important;
-
-        &.s_popup_fixed {
-            .s_popup_full .s_popup_content {
-               left: $o-we-sidebar-width !important;
-            }
-        }
-        &.s_popup_fixed_top {
-            .s_popup_content {
-                top: var(--o-we-toolbar-height) !important;
-            }
+body.editor_enable.editor_has_snippets {
+    .s_popup .modal {
+        top: var(--o-we-toolbar-height);
+        background-color: transparent;
+        &.fade .modal-dialog {
+            transform: none;
         }
     }
 }
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 321f7792112..b954f1116f2 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -996,3 +996,10 @@ $ribbon-padding: 100px;
     @include o-position-absolute($top: 0, $left: 0);
     padding: 0.25rem 1rem;
 }
+
+// Cookies Bar
+#website_cookies_bar {
+    :not(.o_cookies_popup) {
+        bottom: 0;
+    }
+}
diff --git a/addons/website/static/src/snippets/s_popup/000.js b/addons/website/static/src/snippets/s_popup/000.js
index a16b711b290..37b8e2a6a22 100644
--- a/addons/website/static/src/snippets/s_popup/000.js
+++ b/addons/website/static/src/snippets/s_popup/000.js
@@ -9,6 +9,7 @@ const PopupWidget = publicWidget.Widget.extend({
     selector: '.s_popup',
     events: {
         'click .js_close_popup': '_onCloseClick',
+        'hide.bs.modal': '_onHideModal',
     },
 
     /**
@@ -38,7 +39,7 @@ const PopupWidget = publicWidget.Widget.extend({
      * @private
      */
     _bindPopup: function () {
-        const $main = this.$target.find('.s_popup_main');
+        const $main = this.$target.find('.modal');
 
         let display = $main.data('display');
         let delay = $main.data('showAfter');
@@ -48,7 +49,7 @@ const PopupWidget = publicWidget.Widget.extend({
                 display = 'afterDelay';
                 delay = 5000;
             }
-            this.$('.s_popup_main').removeClass('s_popup_center').addClass('s_popup_bottom');
+            this.$('.modal').removeClass('s_popup_middle').addClass('s_popup_bottom');
         }
 
         if (display === 'afterDelay') {
@@ -61,7 +62,7 @@ const PopupWidget = publicWidget.Widget.extend({
      * @private
      */
     _hidePopup: function () {
-        this.$target.find('.s_popup_main').addClass('d-none');
+        this.$target.find('.modal').modal('hide');
     },
     /**
      * @private
@@ -70,7 +71,7 @@ const PopupWidget = publicWidget.Widget.extend({
         if (this._popupAlreadyShown) {
             return;
         }
-        this.$target.find('.s_popup_main').removeClass('d-none');
+        this.$target.find('.modal').modal('show');
     },
 
     //--------------------------------------------------------------------------
@@ -81,14 +82,37 @@ const PopupWidget = publicWidget.Widget.extend({
      * @private
      */
     _onCloseClick: function () {
-        const nbDays = this.$el.find('.s_popup_main').data('consentsDuration');
+        this._hidePopup();
+    },
+    /**
+     * @private
+     */
+    _onHideModal: function () {
+        const nbDays = this.$el.find('.modal').data('consentsDuration');
         utils.set_cookie(this.$el.attr('id'), true, nbDays * 24 * 60 * 60);
         this._popupAlreadyShown = true;
-        this._hidePopup();
     },
 });
 
 publicWidget.registry.popup = PopupWidget;
 
+// Prevent bootstrap to prevent scrolling and to add the strange body
+// padding-right they add if the popup does not use a backdrop (especially
+// important for default cookie bar).
+const _baseSetScrollbar = $.fn.modal.Constructor.prototype._setScrollbar;
+$.fn.modal.Constructor.prototype._setScrollbar = function () {
+    if (this._element.classList.contains('s_popup_no_backdrop')) {
+        return;
+    }
+    return _baseSetScrollbar.apply(this, ...arguments);
+};
+const _baseGetScrollbarWidth = $.fn.modal.Constructor.prototype._getScrollbarWidth;
+$.fn.modal.Constructor.prototype._getScrollbarWidth = function () {
+    if (this._element.classList.contains('s_popup_no_backdrop')) {
+        return 0;
+    }
+    return _baseGetScrollbarWidth.apply(this, ...arguments);
+};
+
 return PopupWidget;
 });
diff --git a/addons/website/static/src/snippets/s_popup/000.scss b/addons/website/static/src/snippets/s_popup/000.scss
index a7e28c8e6a9..b548a97dd79 100644
--- a/addons/website/static/src/snippets/s_popup/000.scss
+++ b/addons/website/static/src/snippets/s_popup/000.scss
@@ -1,5 +1,5 @@
 // s_popup
-.s_popup_main {
+.s_popup_main:not([data-vcss]) {
     .s_popup_content {
         // keep lower than <p> height (cookies bar)
         min-height: $o-font-size-base * $o-line-height-base;
diff --git a/addons/website/static/src/snippets/s_popup/001.scss b/addons/website/static/src/snippets/s_popup/001.scss
new file mode 100644
index 00000000000..af92f1b8c42
--- /dev/null
+++ b/addons/website/static/src/snippets/s_popup/001.scss
@@ -0,0 +1,66 @@
+.s_popup[data-vcss='001']  {
+    .modal-content {
+        min-height: $font-size-lg * 2;
+        border: 0;
+        border-radius: 0;
+        box-shadow: $modal-content-box-shadow-sm-up;
+    }
+
+    // Close icon
+    .s_popup_close {
+        z-index: $zindex-modal;
+        @include o-position-absolute(0, 0);
+        width: $font-size-lg * 2;
+        height: $font-size-lg * 2;
+        line-height: $font-size-lg * 2;
+        @include o-bg-color(color-yiq(o-color('primary')), o-color('primary'), $with-extras: false);
+        box-shadow: $box-shadow-sm;
+        cursor: pointer;
+        font-size: $font-size-lg;
+        text-align: center;
+    }
+
+    // Size option - Full
+    .s_popup_size_full {
+        padding: 0 !important;
+        max-width: 100%;
+
+        > .modal-content {
+            // Use the backdrop color as background-color
+            background-color: transparent;
+            box-shadow: none;
+            border-radius: 0;
+        }
+    }
+
+    // Position option - Middle
+    .s_popup_middle .modal-dialog {
+        align-items: center;
+    }
+
+    // Position option - Top/Bottom
+    .s_popup_top,
+    .s_popup_bottom {
+        .modal-dialog {
+            margin-right: 0;
+            &:not(.s_popup_size_full) {
+                padding: $spacer !important;
+            }
+        }
+    }
+    .s_popup_top .modal-dialog {
+        align-items: flex-start;
+    }
+    .s_popup_bottom .modal-dialog {
+        align-items: flex-end;
+    }
+
+    // No backdrop
+    .s_popup_no_backdrop {
+        pointer-events: none;
+
+        .modal-content {
+            pointer-events: auto;
+        }
+    }
+}
diff --git a/addons/website/static/src/snippets/s_popup/options.js b/addons/website/static/src/snippets/s_popup/options.js
index c667d8adc59..f31c00d3419 100644
--- a/addons/website/static/src/snippets/s_popup/options.js
+++ b/addons/website/static/src/snippets/s_popup/options.js
@@ -10,16 +10,29 @@ options.registry.SnippetPopup = options.Class.extend({
     start: function () {
         // Note: the link are excluded here so that internal modal buttons do
         // not close the popup as we want to allow edition of those buttons.
-        this.$target.find('.js_close_popup:not(a, .btn)').on('click', ev => {
+        this.$target.on('click.SnippetPopup', '.js_close_popup:not(a, .btn)', ev => {
             ev.stopPropagation();
             this.onTargetHide();
             this.trigger_up('snippet_option_visibility_update', {show: false});
         });
+        this.$target.on('shown.bs.modal.SnippetPopup', () => {
+            this.trigger_up('snippet_option_visibility_update', {show: true});
+        });
+        this.$target.on('hidden.bs.modal.SnippetPopup', () => {
+            this.trigger_up('snippet_option_visibility_update', {show: false});
+        });
         return this._super(...arguments);
     },
     /**
      * @override
      */
+    destroy: function () {
+        this._super(...arguments);
+        this.$target.off('.SnippetPopup');
+    },
+    /**
+     * @override
+     */
     onBuilt: function () {
         this._assignUniqueID();
     },
@@ -33,14 +46,26 @@ options.registry.SnippetPopup = options.Class.extend({
      * @override
      */
     onTargetShow: async function () {
-        this.$target.removeClass('d-none');
+        this.$target.modal('show');
+        $(document.body).children('.modal-backdrop:last').addClass('d-none');
     },
     /**
      * @override
      */
     onTargetHide: async function () {
-        this.$target.addClass('d-none');
+        return new Promise(resolve => {
+            const timeoutID = setTimeout(() => {
+                this.$target.off('hidden.bs.modal.popup_on_target_hide');
+                resolve();
+            }, 500);
+            this.$target.one('hidden.bs.modal.popup_on_target_hide', () => {
+                clearTimeout(timeoutID);
+                resolve();
+            });
+            this.$target.modal('hide');
+        });
     },
+
     //--------------------------------------------------------------------------
     // Options
     //--------------------------------------------------------------------------
@@ -56,18 +81,11 @@ options.registry.SnippetPopup = options.Class.extend({
         this.$target.closest('.s_popup').prependTo($container.find('.oe_structure:o_editable').first());
     },
     /**
-     * Switch layout from modal <--> a sticky div
-     *
      * @see this.selectClass for parameters
      */
-    setLayout: function (previewMode, widgetValue, params) {
-        const isModal = widgetValue === 'modal';
-        const isTop = widgetValue === 'fixedTop';
-        this.$target.toggleClass('s_popup_fixed', !isModal);
-        this.$target.toggleClass('s_popup_fixed_top', isTop);
-        this.$target.toggleClass('s_popup_center modal', isModal);
-        this.$target.find('.s_popup_frame').toggleClass('modal-dialog modal-dialog-centered', isModal);
-        this.$target.find('.s_popup_content').toggleClass('modal-content', isModal);
+    setBackdrop(previewMode, widgetValue, params) {
+        const color = widgetValue ? 'var(--black-50)' : '';
+        this.$target[0].style.setProperty('background-color', color, 'important');
     },
 
     //--------------------------------------------------------------------------
@@ -89,33 +107,6 @@ options.registry.SnippetPopup = options.Class.extend({
         switch (methodName) {
             case 'moveBlock':
                 return this.$target.closest('footer').length ? 'moveToFooter' : 'moveToBody';
-            case 'setLayout':
-                if (this.$target.hasClass('s_popup_center')) {
-                    return 'modal';
-                } else if (this.$target.hasClass('s_popup_fixed_top')) {
-                    return 'fixedTop';
-                }
-                return 'fixedBottom';
-        }
-        return this._super(...arguments);
-    },
-});
-
-options.registry.PopupContent = options.Class.extend({
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Enable bg-color only if "centered AND full-size".
-     * Visibility according to the size is managed by data-dependencies.
-     *
-     * @override
-     */
-    async _computeWidgetVisibility(widgetName, params) {
-        if (widgetName === 'popup_content_colorpicker_opt') {
-            return this.$target.closest('.s_popup_main').hasClass('s_popup_center');
         }
         return this._super(...arguments);
     },
diff --git a/addons/website/static/src/xml/website.cookies_bar.xml b/addons/website/static/src/xml/website.cookies_bar.xml
index 8f43ccb3698..1f43786926b 100644
--- a/addons/website/static/src/xml/website.cookies_bar.xml
+++ b/addons/website/static/src/xml/website.cookies_bar.xml
@@ -1,74 +1,66 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
     <t t-name="website.cookies_bar.text_title">
-        <div class="o_cookies_bar_text_title">
-            <p>Respecting your privacy is our priority.</p>
-        </div>
+        <h3 class="o_cookies_bar_text_title">
+            Respecting your privacy is our priority.
+        </h3>
     </t>
     <t t-name="website.cookies_bar.text_primary">
-        <div class="o_cookies_bar_text_primary">
+        <p class="o_cookies_bar_text_primary">
             We use cookies to provide you a better user experience.
-        </div>
+        </p>
     </t>
     <t t-name="website.cookies_bar.text_secondary">
-        <div class="o_cookies_bar_text_secondary">
-            We use them to store info about your habits on our website. It will helps us to provide you the very best experience and customize what you see.
-            <br/>
+        <p class="o_cookies_bar_text_secondary">
+            We use them to store info about your habits on our website. It will helps us to provide you the very best experience and customize what you see. <br/>
             By clicking on this banner, you give us permission to collect data.
-        </div>
+        </p>
     </t>
-
     <t t-name="website.cookies_bar.discrete">
-        <section class="pt4 pb4">
-            <div class="container text-600 d-flex align-items-center">
-                <div class="mb0">
-                    <t t-call="website.cookies_bar.text_primary"/>
+        <section class="o_colored_level o_cc o_cc1">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-8 pt16">
+                        <p>We use cookies to provide you a better user experience.</p>
+                    </div>
+                    <div class="col-lg-4 pt16 text-right">
+                        <a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link btn-sm">Cookie Policy</a>
+                        <a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-sm">I agree</a>
+                    </div>
                 </div>
-                <a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link btn-sm text-nowrap ml-auto">Cookie Policy</a>
-                <a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-sm text-nowrap">I agree</a>
             </div>
         </section>
     </t>
     <t t-name="website.cookies_bar.classic">
-        <section class="pt24 pb24">
-            <div class="container text-600 d-flex align-items-center">
-                <div>
-                    <div class="h3 text-900">
+        <section class="o_colored_level o_cc o_cc1 pt32 pb16">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-6">
                         <t t-call="website.cookies_bar.text_title"/>
-                    </div>
-                    <div class="small">
                         <t t-call="website.cookies_bar.text_primary"/>
-                    </div>
-                    <div class="small">
                         <t t-call="website.cookies_bar.text_secondary"/>
                     </div>
-                </div>
-                <div class="ml-auto">
-                    <a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-block text-nowrap">I agree</a>
-                    <a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link btn-sm text-nowrap">Cookie Policy</a>
+                    <div class="col-lg-3 offset-lg-3">
+                        <a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-block">I agree</a>
+                        <a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link btn-block">Cookie Policy</a>
+                    </div>
                 </div>
             </div>
         </section>
     </t>
     <t t-name="website.cookies_bar.popup">
-        <section class="p-5">
-            <div class="container text-800 text-center">
-                <img t-attf-src="/web/image/website/#{websiteId}/logo/250x250" class="img img-fluid" alt="Website Logo"/>
-                <br/><br/>
-                <div class="h3">
-                    <t t-call="website.cookies_bar.text_title"/>
-                </div>
-                <br/>
-                <div class="mb0 text-left">
-                    <t t-call="website.cookies_bar.text_primary"/>
-                </div>
-                <div class="text-left">
-                    <t t-call="website.cookies_bar.text_secondary"/>
+        <section class="o_colored_level o_cc o_cc1 p-5">
+            <div class="container text-center">
+                <div class="row">
+                    <div class="col-lg-12">
+                        <img t-attf-src="/web/image/website/#{websiteId}/logo/250x250" class="img img-fluid mb-4" alt="Website Logo"/>
+                        <t t-call="website.cookies_bar.text_title"/>
+                        <t t-call="website.cookies_bar.text_primary"/>
+                        <t t-call="website.cookies_bar.text_secondary"/>
+                        <a href="/cookie-policy" class=" o_cookies_bar_text_policy btn btn-link mr-2">Cookie Policy</a>
+                        <a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary">I agree</a>
+                    </div>
                 </div>
-                <br/>
-                <a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-lg">Cookie Policy</a>
-                <br/>
-                <a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link">I agree</a>
             </div>
         </section>
     </t>
diff --git a/addons/website/views/snippets/s_popup.xml b/addons/website/views/snippets/s_popup.xml
index d1632c7fe64..ce082a9d567 100644
--- a/addons/website/views/snippets/s_popup.xml
+++ b/addons/website/views/snippets/s_popup.xml
@@ -2,26 +2,28 @@
 <odoo>
 
 <template id="s_popup" name="Popup">
-    <div class="s_popup o_snippet_invisible">
-        <div class='modal s_popup_main popup_backdrop s_popup_center o_one_page bg-black-25 '
-             data-show-after="5000" data-display="afterDelay" data-consents-duration="7">
-            <div class='modal-dialog modal-dialog-centered s_popup_frame modal-md'>
-                <div class='oe_structure modal-content s_popup_content oe_img_bg oe_custom_bg' style="background-color: #FFFFFF">
-                    <div class='js_close_popup s_popup_close o_we_no_overlay o_not_editable'>&amp;times;</div>
-                    <section class="s_banner parallax pt96 pb96" data-snippet="s_banner">
-                        <span class="s_parallax_bg oe_img_bg oe_custom_bg" style="background-image: url('/web/image/website.s_banner_default_image');"></span>
+    <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-backdrop="false"
+             tabindex="-1"
+             role="dialog">
+            <div class="modal-dialog d-flex">
+                <div class="modal-content oe_structure">
+                    <div class="s_popup_close js_close_popup o_we_no_overlay o_not_editable">&amp;times;</div>
+                    <section class="s_banner oe_img_bg pt96 pb96"
+                             data-snippet="s_banner"
+                             style="background-image: url('/web/image/website.s_popup_default_image');">
                         <div class="container">
                             <div class="row s_nb_column_fixed">
-                                <div class="offset-lg-1 col-lg-7 o_cc o_cc1 jumbotron rounded pt32 pb32">
-                                    <div class="row">
-                                        <div class="col-lg-12 s_col_no_bgcolor">
-                                            <h1>
-                                              <font style="font-size: 62px;">Win 20$</font>
-                                            </h1>
-                                            <p class="lead">Order now, and get 20$ discount on your first order with the coupon:<br/></p>
-                                            <p><button class="btn btn-primary rounded-circle">NEWCUSTOMER</button></p>
-                                        </div>
-                                    </div>
+                                <div class="col-lg-10 offset-lg-1 text-center o_cc o_cc1 jumbotron pt48 pb48">
+                                    <h2><font style="font-size: 62px;">Win $20</font></h2>
+                                    <p class="lead">Check out now and get $20 off your first order.</p>
+                                    <a href="#" class="btn btn-primary">New customer</a>
                                 </div>
                             </div>
                         </div>
@@ -34,52 +36,74 @@
 
 <template id="s_popup_options" inherit_id="website.snippet_options">
     <xpath expr="." position="inside">
-        <div data-js="SnippetPopup" data-selector=".s_popup" data-target=".s_popup_main">
-            <we-select string="Position">
-                <we-button data-set-layout="fixedTop" data-name="position_top">Top</we-button>
-                <we-button data-set-layout="modal" data-name="position_centered">Center</we-button>
-                <we-button data-set-layout="fixedBottom" data-name="position_bottom">Bottom</we-button>
+        <t t-set="base_popup_options">
+            <we-select string="Position" data-dependencies="layout_popup_opt"> <!-- When cookie configuration only display this for popup mode -->
+                <we-button data-select-class="s_popup_top" data-name="position_top">Top</we-button>
+                <we-button data-select-class="s_popup_middle" data-name="position_middle">Middle</we-button>
+                <we-button data-select-class="s_popup_bottom" data-name="position_bottom">Bottom</we-button>
             </we-select>
-            <we-select string="Size" data-apply-to=".s_popup_frame">
+            <we-select string="Size" data-apply-to=".modal-dialog" data-name="s_popup_size_opt">
                 <we-button data-select-class="modal-sm">Small</we-button>
-                <we-button data-select-class="modal-md" data-name="s_popup_size_md">Medium</we-button>
+                <we-button data-select-class="" data-name="s_popup_size_md">Medium</we-button>
                 <we-button data-select-class="modal-lg">Large</we-button>
-                <we-button data-select-class="modal-xl">Big</we-button>
-                <we-button data-select-class="s_popup_full" data-name="s_popup_size_full">Full</we-button>
+                <we-button data-select-class="modal-xl">Extra Large</we-button>
+                <we-button data-select-class="s_popup_size_full" data-name="s_popup_size_full">Full</we-button>
             </we-select>
-            <we-colorpicker string="Backdrop Color" data-select-style="true"
-                data-css-property="background-color" data-color-prefix="bg-" data-dependencies="position_centered"/>
-        </div>
-        <div data-js="PopupContent" data-selector=".s_popup" data-target=".s_popup_content">
-            <we-colorpicker string="Background Color"
+            <we-row string="Backdrop">
+                <we-colorpicker data-dependencies="popup_backdrop_opt"
+                                data-select-style="true"
+                                data-css-property="background-color"
+                                data-color-prefix="bg-"
+                                data-css-compatible="true"/>
+                <we-checkbox data-name="popup_backdrop_opt"
+                             data-select-class="s_popup_no_backdrop|"
+                             data-set-backdrop="true"
+                             data-no-preview="true"/>
+            </we-row>
+        </t>
+        <t t-set="extra_popup_options">
+            <we-colorpicker string="Close Button Color"
                             data-select-style="true"
-                            data-css-property="background-color"
-                            data-color-prefix="bg-"
-                            data-name="popup_content_colorpicker_opt"
-                            data-dependencies="s_popup_size_full"/>
-        </div>
-        <div data-js="SnippetPopup" data-selector=".s_popup" data-exclude="#website_cookies_bar" data-target=".s_popup_main">
-            <we-colorpicker string="Text Color" data-select-style="true" data-css-property="color" data-color-prefix="text-"/>
+                            data-css-property="color"
+                            data-color-prefix="text-"
+                            data-apply-to=".s_popup_close"/>
             <we-select string="Display" data-attribute-name="display" data-attribute-default-value="always">
                 <we-button data-select-data-attribute="afterDelay" data-name="show_delay">Delay</we-button>
                 <we-button data-select-data-attribute="mouseExit">On Exit</we-button>
             </we-select>
-            <we-input string="Delay" data-select-data-attribute="" data-attribute-name="showAfter" data-unit="s" data-save-unit="ms" data-dependencies="show_delay"/>
+            <we-input string="Delay"
+                      data-select-data-attribute=""
+                      data-attribute-name="showAfter"
+                      data-unit="s"
+                      data-save-unit="ms"
+                      data-dependencies="show_delay"/>
             <t t-set="unit_popup_duration">days</t>
             <we-input string="Hide For" title="Once the user closes the popup, it won't be shown again for that period of time." t-attf-data-select-data-attribute="7#{unit_popup_duration}" data-attribute-name="consentsDuration" t-att-data-unit="unit_popup_duration"/>
             <we-select string="Show on" data-no-preview="true">
                 <we-button data-move-block="moveToBody">This page</we-button>
                 <we-button data-move-block="moveToFooter">All pages</we-button>
             </we-select>
+        </t>
+        <div data-js="SnippetPopup" data-selector=".s_popup" data-exclude="#website_cookies_bar" data-target=".modal">
+            <t t-raw="base_popup_options"/>
+            <t t-raw="extra_popup_options"/>
+        </div>
+        <div data-js="SnippetPopup" data-selector=".s_popup#website_cookies_bar" data-target=".modal">
+            <t t-raw="base_popup_options"/>
         </div>
     </xpath>
 </template>
 
-<template id="assets_snippet_s_popup_css_000" inherit_id="website.assets_frontend">
+<template id="assets_snippet_s_popup_css_000" inherit_id="website.assets_frontend" active="False">
     <xpath expr="//link[last()]" position="after">
         <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_popup/000.scss"/>
     </xpath>
 </template>
+<template id="assets_snippet_s_popup_css_001" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_popup/001.scss"/>
+    </xpath>
+</template>
 
 <template id="assets_snippet_s_popup_js_000" inherit_id="website.assets_frontend">
     <xpath expr="//script[last()]" position="after">
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 5f66dd3fffd..db0eb925113 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -647,11 +647,11 @@
     </div>
 
     <!-- Cookies Bar -->
-    <div data-selector="#website_cookies_bar" data-js="CookiesBar" data-target=".s_popup_main">
+    <div data-selector="#website_cookies_bar" data-js="CookiesBar" data-target=".modal">
         <we-select string="Layout" class="o_we_inline">
             <we-button data-select-class="o_cookies_discrete" data-select-layout="discrete" data-trigger="position_bottom,s_popup_size_full">Discrete</we-button>
             <we-button data-select-class="o_cookies_classic" data-select-layout="classic" data-trigger="position_bottom,s_popup_size_full">Classic</we-button>
-            <we-button data-select-class="o_cookies_popup" data-select-layout="popup" data-trigger="position_centered,s_popup_size_md">Popup</we-button>
+            <we-button data-name="layout_popup_opt" data-select-class="o_cookies_popup" data-select-layout="popup" data-trigger="position_middle,s_popup_size_md">Popup</we-button>
         </we-select>
     </div>
 
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 06fbb7d66fa..5cd7087580d 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -521,21 +521,30 @@
 </template>
 
 <template id="cookies_bar" inherit_id="website.footer_custom" name="Cookies Bar">
-    <xpath expr="//div[@id='footer']" position="before">
-        <div id="website_cookies_bar" t-if="website.cookies_bar" class="s_popup o_snippet_invisible" data-name="Cookies Bar">
-            <div class='s_popup_main s_popup_fixed popup_backdrop d-none o_cookies_discrete'
-                 data-show-after="500" data-display="afterDelay" data-consents-duration="999">
-                <div class='s_popup_frame s_popup_full'>
-                    <div class='oe_structure s_popup_content bg-white'>
-                        <section class="pt4 pb4">
-                            <div class="container text-600 d-flex align-items-center">
-                                <div class="mb0">
-                                    <div class="o_cookies_bar_text_primary">
-                                        We use cookies to provide you a better user experience.
+    <xpath expr="//footer" position="after">
+        <div id="website_cookies_bar" t-if="website.cookies_bar" class="s_popup o_snippet_invisible" 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"
+                 data-consents-duration="999"
+                 data-focus="false"
+                 data-backdrop="false"
+                 data-keyboard="false"
+                 tabindex="-1"
+                 role="dialog">
+                <div class="modal-dialog d-flex s_popup_size_full">
+                    <div class="modal-content oe_structure">
+                        <section class="o_colored_level o_cc o_cc1">
+                            <div class="container">
+                                <div class="row">
+                                    <div class="col-lg-8 pt16">
+                                        <p>We use cookies to provide you a better user experience.</p>
+                                    </div>
+                                    <div class="col-lg-4 pt16 text-right">
+                                        <a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link btn-sm">Cookie Policy</a>
+                                        <a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-sm">I agree</a>
                                     </div>
                                 </div>
-                                <a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link btn-sm text-nowrap ml-auto">Cookie Policy</a>
-                                <a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-sm text-nowrap">I agree</a>
                             </div>
                         </section>
                     </div>