On the homepage, there is a modal window that appears upon every pageload (it will be changed later), however, there seems to be an issue with the 'email sign up' form inside the window.
The form seems to momentarily display at the top of the site before quickly jumping inside the modal window where it belongs. This is not the desired behavior, as it should load inside the modal consistently.
Here are the settings for the modal:
<!--
Adjust the following values to customize the home page popup box.
-->
{% assign show_home_popup = 'true' %}
<!--
Setting this value to 'true' will only show the popup on the user's initial visit to the home page each day. If set to 'false', the popup will display every time the user visits the home page.
-->
{% assign show_on_first_visit_only = 'false' %}
<!--
Insert the direct link to the image you want to display in the popup between the quotes below.
-->
{% assign popup_image = 'https://dl.dropboxusercontent.com/s/2oac9b1j2cni7ta/JOINTHEPARTY.png' %}<!--
Set the maximum image width here if you want to adjust the size (e.g. assign image_width = '700'). The default width is 600 pixels if left empty (e.g. assign image_width = '' ).
-->
{% assign image_width = '450' %}
Here is the CSS for the modal:
#homeModal {
top: 150px;
width: 450px;
height: 400px;
{% if image_width == blank %}
max-width: 600px;
{% else %}
max-width: {{image_width}}px;
{% endif %}
right:0;
left: 0;
margin:auto;
display:inline-block;
padding: 0;
}
#homeModal img {
width: 100%;
}
#homeModal iframe {
position: relative;
top: -193px;
left: 25px;
}
/*#homeModal iframe body,
#homeModal iframe html
{
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
} */
@media screen and (max-width: 500px)
{
#homeModal {
height: 300px;
width: 350px;
min-width: 350px;
}
#homeModal iframe {
left: 1px;
position: relative;
top: -163px;
}
}
Here is the code/plugin/script for the modal:
<link rel="stylesheet" href="http://googledrive.com/host/0B51UCH0yGk6FVkFBakNmUXVuREk/reveal.css">
<script src="http://googledrive.com/host/0B51UCH0yGk6FVkFBakNmUXVuREk/jquery.reveal.js" type="text/javascript"></script>
<script src="http://googledrive.com/host/0B51UCH0yGk6FVkFBakNmUXVuREk/jquery.cookie.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#homeModal img').attr('src', '{{popup_image}}');
{% if show_on_first_visit_only == 'true' %}
if (!$.cookie("popup")) {
//trigger your popup message
$('#homeModal').reveal({
animation: 'none',
animationspeed: 300,
closeonbackgroundclick: true,
dismissmodalclass: 'close-reveal-modal'
});
//update the cookie after showing the popup
$.cookie("popup","false", {expires: 1} ); //do not show again
}
{% else %}
$('#homeModal').reveal({
animation: 'none',
animationspeed: 300,
closeonbackgroundclick: true,
dismissmodalclass: 'close-reveal-modal'
});
{% endif %}
});
</script>
The issue can be seen here: