Add form overlay

[MAILPOET-2741]

assets/css/src/components-public/_public.scss

@@ -158,6 +158,19 @@ $form-columns-space-between: 20px;
   }
 }
 
+.mailpoet_form_popup_overlay {
+  background-color: black;
+  display: none;
+  height: 100%;
+  left: 0;
+  max-width: 100% !important;
+  opacity: .7;
+  position: fixed;
+  top: 0;
+  width: 100% !important;
+  z-index: 1000;
+}
+
 div.mailpoet_form_popup {
   background-color: white;
   border-radius: 10px;
@@ -170,7 +183,7 @@ div.mailpoet_form_popup {
   top: 50%;
   transform: translate(-50%, -50%);
   width: 500px !important;
-  z-index: 1000;
+  z-index: 1001;
 }
 
 .mailpoet_popup_close_icon {
@@ -185,7 +198,7 @@ div.mailpoet_form_popup {
   }
 }
 
-.mailpoet_form_modal_background.active,
+.mailpoet_form_popup_overlay.active,
 div.mailpoet_form_popup.active {
   display: block;
 }

assets/js/src/public.jsx

@@ -11,13 +11,16 @@ function setCookie(name, value, days) {
   }
   document.cookie = `${name}=${value}${expires}; path=/`;
 }
+
 function getCookie(name) {
   const nameEQ = `${name}=`;
-  const ca = document.cookie.split(';');
+  const cookieParts = document.cookie.split(';');
-  for (let i = 0; i < ca.length; i += 1) {
+  for (let i = 0; i < cookieParts.length; i += 1) {
-    let c = ca[i];
+    let cookiePart = cookieParts[i];
-    while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+    while (cookiePart.charAt(0) === ' ') cookiePart = cookiePart.substring(1, cookiePart.length);
-    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+    if (cookiePart.indexOf(nameEQ) === 0) {
+      return cookiePart.substring(nameEQ.length, cookiePart.length);
+    }
   }
   return null;
 }
@@ -55,10 +58,20 @@ jQuery(($) => {
   }
 
   $(() => {
+    const closePopupForm = (formDiv) => {
+      formDiv.removeClass('active');
+      formDiv.prev('.mailpoet_form_popup_overlay').removeClass('active');
+      setCookie('popup_form_dismissed', '1', 365);
+    };
     $('.mailpoet_popup_close_icon').click((event) => {
       const closeIcon = $(event.target);
-      closeIcon.parent().removeClass('active');
+      const formDiv = closeIcon.parent();
-      setCookie('popup_form_dismissed', '1', 365);
+      closePopupForm(formDiv);
+    });
+    $('.mailpoet_form_popup_overlay').click((event) => {
+      const overlay = $(event.target);
+      const formDiv = overlay.next('div.mailpoet_form_popup');
+      closePopupForm(formDiv);
     });
 
     $('div.mailpoet_form_popup').each((index, element) => {
@@ -76,6 +89,7 @@ jQuery(($) => {
       }
       setTimeout(() => {
         formDiv.addClass('active');
+        formDiv.prev('.mailpoet_form_popup_overlay').addClass('active');
       }, delay * 1000);
     });
 

views/form/front_end_form.html

@@ -7,7 +7,7 @@
     <%= before_title | raw %><%= title | raw %><%= after_title | raw %>
   <% endif %>
 
-
+  <div class="mailpoet_form_popup_overlay"></div>
   <div id="<%= form_html_id %>" class="mailpoet_form mailpoet_form_<%= form_type %>">
     <% if form_type == 'popup' %>
       <img