newsletter-popout.html

<div id="overlay-bg"></div>
<div id="newsletter-popout">
	<div class="news-header">Thank you for downloading CockroachDB</div>
	<div class="news-subheader">Keep up-to-date with CockroachDB software releases and usage best practices</div>
	<div id="hubspot-popup-form">
		<script>
			hbspt.forms.create({
				css: '',
				cssClass: 'popout-form',
				portalId: '1753393',
				formId: '3a24a2d8-c2fd-4e89-acf6-73a4e7b4b69f',
				target: '#hubspot-popup-form'
			});
		</script>
	</div>
	<div class="newsletter-close"><img src="{{ 'images/close_icon.png' | relative_url }}" style="max-width: 36px;" data-proofer-ignore/></div>
</div>

<div id="newsletter-footer-popout">
	<div class="container">
		<div class="row">
			<div class="col-xs-12 col-sm-6">
				<div class="news-header">Keep up-to-date with CockroachDB software releases and usage best practices</div>
			</div>
			<div class="col-xs-12 col-sm-6">
				<div id="hubspot-footer-popup-form">
					<script>
						hbspt.forms.create({
							css: '',
							cssClass: 'popout-form',
							portalId: '1753393',
							formId: '179cc17e-1092-4aa3-be00-e01d9144d066',
							target: '#hubspot-footer-popup-form'
						});
					</script>
				</div>
			</div>
		</div>
	</div>
	<div class="newsletter-close"><img src="{{ 'images/close_icon.png' | relative_url }}" style="max-width: 25px;" data-proofer-ignore/></div>
</div>

<script>
	$(document).ready(function(){
		//*modal*//
		var $popout = $('#newsletter-popout'),
			$overlay = $('#overlay-bg'),
			$close = $('#newsletter-popout .newsletter-close');

		/*
		$(window).on('dblclick', function(){
			$overlay.fadeIn();
			$popout.fadeIn();
		});

		$close.on('click', function(){
			$overlay.fadeOut();
			$popout.fadeOut();
		});
		*/

		//*footer*//
		var $footer_popout = $('#newsletter-footer-popout'),
			$footer_close = $('#newsletter-footer-popout .newsletter-close');

		$(window).scroll(function() {
			var cookie = getCookie('popout');
			if(!cookie && window.innerWidth >= 768){
			   	if($(window).scrollTop() + $(window).height() >= $(document).height()*.75) {
			    	$footer_popout.addClass('animate');
			    	setCookie('popout', 1);
			   	}
			}
		});

		$footer_close.on('click', function(){
			$footer_popout.removeClass('animate');
		});

		function setCookie(key, value) {
            var expires = new Date();
            expires.setTime(expires.getTime() + (7 * 24 * 60 * 60 * 1000));
            document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
        }

        function getCookie(key) {
            var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
            return keyValue ? keyValue[2] : null;
        }
	});
</script>