Template for email contact overlays

code.php

echo '
<h2 id="peer-assist-link">Dedicated Peer Assist with EGI Scientists</h2>
<div id="peer-assist-overlay" style="display: none;"><div id="peer-assist-close"><img src="/wp-content/uploads/2014/07/button-close-black.png"/></div>[contact-form-7 id="13584" title="Benefits Page Contact (Peer Assist)"]</div>';

script.js

window.onload = function() {
  jQuery("#peer-assist-link").click(function(e) {
	  e.stopPropagation();
	  jQuery("#peer-assist-overlay").show();
	  console.log("peer-assist-overlay show");
  });

  jQuery("#peer-assist-overlay").appendTo(".page-container");
  jQuery("html").click(function() {
    jQuery("#peer-assist-overlay").hide();
  });

  jQuery("#peer-assist-close").click(function(e) {
    e.stopPropagation();
    jQuery("#peer-assist-overlay").hide();
  });

  jQuery("#peer-assist-overlay").click(function(event) {
    event.stopPropagation();
  });
};

style.css

#peer-assist-link{
	margin-top: 5px;
	text-align: center;
	color: #333;
	cursor: pointer;
}

#peer-assist-overlay{
	display: none;
	position: fixed;
    padding: 20px 20px 20px 20px;
    top: 25%;
    left: 25%;
    width: 50%;
    background-color: #2D3033;
    z-index: 10000;
    border-radius: 14px;
}

#peer-assist-close{
	position:absolute;
	right:-7px;
	top:-7px;
	cursor: pointer;
}