tag-manager-popup-message-template.html

<div hidden id="tagManager-tag-manager-promo-desktop">
    <div id="corona-open-modal" class="modal-window">
        <div>
            <a href="#" title="Close" class="modal-close">Fermer</a>
            <h1>INFORMATION</h1>
            <p>Notre activité (prise de commandes, suivi de commandes, renseignements techniques, expéditions) continue pendant cette période</p>
            <p>Les délais de livraison pourraient parfois être rallongés.<br>N’hésitez pas à contacter notre équipe technique pour toute information ou pour tout renseignement.</p>

            <div class="rectangle-1"><p>Livraison offerte à domicile pour toute commande</p></div>

        </div>
    </div>
</div>
<style>
    .modal-window {
        position: fixed;
        background-color: rgba(255, 255, 255, 0.25);
        top: 146px;
        right: 0;
        left: 0;
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
	@media screen and (max-width: 662px){
		.modal-window {
			top:0;
			bottom:0;
		}
	}
	
	
    .modal-window > div {
        max-width: 1180px;
        width: calc(100% - 20px);
        border-radius: 10px;
        background-color: #B75D3E;
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        padding: 2em;
        background: #B75D3E;
        color: #FFFFFF;
    }
    .modal-window > div h1 {
        color: #FFFFFF;
        font-family: "Open Sans";
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 0;
        line-height: 27px;
        text-align: center;
    }
    .modal-window > div p {
        max-width: 981px;
        margin: 10px auto;
        width: 100%;
        color: #FFFFFF;
        font-family: "Open Sans";
        font-size: 16px;
        letter-spacing: 0;
        line-height: 22px;
    }
    .modal-window .modal-close {
        color: #fff;
        line-height: 50px;
        position: absolute;
        right: 0;
        text-align: center;
        top: 0;
        width: 70px;
    }
    .modal-window .modal-close:hover {
        color: black;
    }
    .modal-window .rectangle-1 {
        max-width: 567px;
        width: 100%;
        border-radius: 5px;
        text-align: center;
        margin: 15px auto;
        background-color: rgba(255, 255, 255, 0.1);
        box-shadow: inset 0 0 5px 0 rgba(255, 255, 255, 0.5);
    }
    .modal-window .rectangle-1 p {
        
        max-width: 487px;
		width:100%;
        color: #FFFFFF;
        font-family: Quicksand;
        font-size: 20px;
        font-weight: bold;
        padding: 8px;
        letter-spacing: 0;
        line-height: 25px;
    }

</style>
<script>
    var tagManager = tagManager || {};

    tagManager.promo = function () {
        var self = {
			cookieName: 'corona-popup',
            init: function () {
                jQuery(document).ready(self.ready);
            },

            ready: function () {
                if ( jQuery("#tagManager-tag-manager-promo-desktop #corona-open-modal").length > 0) {
                    self.handlePromo();
                } else {
                    setTimeout(self.ready, 100);
                }

            },

            handlePromo: function () {
                console.log("Handle Promo:", "Init");

                var desktopBFClone = jQuery("#tagManager-tag-manager-promo-desktop #corona-open-modal")[0].outerHTML;
                jQuery("body").prepend(desktopBFClone);
                //jQuery(desktopBFClone).insertBefore('#header-nav');


                jQuery(document).on("click", "#corona-open-modal  .modal-close", self.close);

                if (typeof self.getCookie(self.cookieName) === "undefined") {
                    self.open();
                    console.log("Handle Promo:", "popup shown");
                } else {
                    self.close();
                    console.log("Handle Promo:", "Popup hidden");
                }
            },

            open: function () {
                jQuery("#corona-open-modal").show();
                if (typeof self.getCookie(self.cookieName) !== "undefined") {
                    /** Expire the cookie by setting to hour before now */
                    self.createCookie(self.cookieName, "true", -1);
                }
            },

            close: function () {
                jQuery("#corona-open-modal").hide();
                /** Set cookie for one hour so that bar will re appear after one hour since last visit */
                self.createCookie(self.cookieName, "true", 1);
            },

            createCookie: function (name, value, hours)
            {
                if (hours) {
                    var date = new Date();
                    date.setTime(date.getTime() + (hours * 60 * 60 * 1000));
                    var expires = "; expires=" + date.toGMTString();
                } else {
                    var expires = "";
                }
                document.cookie = name + "=" + value + expires + "; path=/";
            },

            getCookie: function (name) {
                var value = "; " + document.cookie;
                var parts = value.split("; " + name + "=");
                if (parts.length == 2)
                    return parts.pop().split(";").shift();
            }

        };
        return self;
    }();
    tagManager.promo.init();

</script>