Display the fixed bar form on top

[MAILPOET-2740]
This commit is contained in:
Pavel Dohnal
2020-04-08 14:35:46 +02:00
committed by Veljko V
parent 4a23048fe2
commit 665e68824e
2 changed files with 48 additions and 15 deletions

View File

@@ -202,8 +202,27 @@ div.mailpoet_form_popup {
} }
} }
div.mailpoet_form_fixed_bar {
background-color: white;
box-shadow: 0 4px 35px 0 rgba(195, 65, 2, .2);
display: none;
left: 0;
max-width: 100% !important;
padding: 10px;
position: fixed;
top: 0;
width: 100% !important;
z-index: 1000;
form {
margin: 0 auto;
max-width: 960px;
}
}
.mailpoet_form_popup_overlay.active, .mailpoet_form_popup_overlay.active,
div.mailpoet_form_popup.active { div.mailpoet_form_popup.active,
div.mailpoet_form_fixed_bar {
display: block; display: block;
} }
@@ -215,15 +234,17 @@ div.mailpoet_form_popup.active {
} }
.aligncenter { .aligncenter {
display: flex;
align-items: center; align-items: center;
justify-content: center; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
} }
.alignleft { .alignleft {
float: left; float: left;
margin-right: 1em; margin-right: 1em;
} }
.alignright { .alignright {
float: right; float: right;
margin-left: 1em; margin-left: 1em;

View File

@@ -57,6 +57,23 @@ jQuery(($) => {
return true; return true;
} }
function showForm(formDiv, showOverlay = false) {
const form = formDiv.find('form');
const background = form.data('background-color');
formDiv.css('background-color', background || 'white');
let delay = form.data('delay');
delay = parseInt(delay, 10);
if (Number.isNaN(delay)) {
delay = 0;
}
setTimeout(() => {
formDiv.addClass('active');
if (showOverlay) {
formDiv.prev('.mailpoet_form_popup_overlay').addClass('active');
}
}, delay * 1000);
}
$(() => { $(() => {
const closePopupForm = (formDiv) => { const closePopupForm = (formDiv) => {
formDiv.removeClass('active'); formDiv.removeClass('active');
@@ -69,23 +86,18 @@ jQuery(($) => {
closePopupForm(formDiv); closePopupForm(formDiv);
}); });
$('div.mailpoet_form_fixed_bar').each((index, element) => {
const formDiv = $(element);
showForm(formDiv);
});
$('div.mailpoet_form_popup').each((index, element) => { $('div.mailpoet_form_popup').each((index, element) => {
const cookieValue = getCookie('popup_form_dismissed'); const cookieValue = getCookie('popup_form_dismissed');
if (cookieValue === '1') return; if (cookieValue === '1') return;
const formDiv = $(element); const formDiv = $(element);
const form = formDiv.find('form'); const showOverlay = true;
const background = form.data('background-color'); showForm(formDiv, showOverlay);
formDiv.css('background-color', background || 'white');
let delay = form.data('delay');
delay = parseInt(delay, 10);
if (Number.isNaN(delay)) {
delay = 0;
}
setTimeout(() => {
formDiv.addClass('active');
formDiv.prev('.mailpoet_form_popup_overlay').addClass('active');
}, delay * 1000);
}); });
// setup form validation // setup form validation