Spent the weekend redoing what I found here
https://forums.modx.com/index.php/topic,24628.0.html
You can see how it works here
http://www.prestelandpartner.com/ at the bottom of the page - on clicking the icon it will open a popup.
Behind the icon is a chunk with the EForm Call
<style type="text/css">
.post {
margin: 0; padding: 10px 20px;
float: left;
width: 160px;
}
/*------------------POPUPS------------------------*/
#fade {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
z-index: 10;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none;
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
.popup p {
padding: 5px 10px;
margin: 5px 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
</style>
<link rel="stylesheet" href="http://modx.com/assets/components/discuss/themes/modx/css/index.css" type="text/css" />
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/discuss.js"></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/sh/shCore.js"></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/sh/shAutoloader.js"></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/sh/shDiscuss.js"></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/dis.sticky.js"></script>
<script type="text/javascript">// <![CDATA[
DIS.url = "/";DIS.shJsUrl = "http://modx.com/assets/components/discuss/themes/modx/js/sh/";DIS.config.connector = "http://modx.com/assets/components/discuss/connector.php"
// ]]></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/dis.post.modify.js"></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/dis.post.buttons.js"></script>
</head>
<body>
<a href="#?w=500" rel="popup1" class="poplight"><img src="images/refer.png" alt="Refer a Friend" /></a>
<!--POPUP START-->
<div id="popup1" class="popup_block">
<h2>Refer a Friend</h2>
[!eForm? &formid=`SendToFriend` &tpl=`formSendToFriend` &report=`SendToFriendReport` &thankyou=`ReferThanks` &to=`((email))` &from=`((emailfrom))` &fromname=`((name1))` &subject=`((name1)) thought that you might be interested in this` &protectSubmit=`0`!]
</div>
<!--END POPUP-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); //fade them both out
return false;
});
});
</script>
Which I placed in the template like so
<div class="one_third">
<h3>Share this</h3>
<ul class="social_icons">
<li><a href="http://www.twitter.com" class="twitter" onclick="window.open(this.href);return false;">Twitter</a></li>
<li><a href="http://www.facebook.com" class="facebook" onclick="window.open(this.href);return false;">Facebook</a></li>
<li><a href="http://www.linkedin.com" class="linkedin" onclick="window.open(this.href);return false;">LinkedIn</a></li>
<li><a href="http://www.Xing.com " class="xing" onclick="window.open(this.href);return false;">Xing</a></li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<h3>Refer a Friend</h3>
{{ReferAFriend}}
</div><!-- end third one_fourth_column -->
The formSendToFriend tpl is
[+validationmessage+]
<form action="[~[*id*]~]" id="SendToFriend" method="post" name="SendToFriend">
<fieldset>
<input type="hidden" name="formid" value="SendToFriend" />
<table width="432" border="0" cellspacing="05" cellpadding="05">
<tr>
<td width="145" valign="top">
<p><label for="name1"><strong>Your Name:</strong> </label></p>
</td>
<td width="252" align="left" valign="top">
<input class="text" id="name1" name="name1" type="text" />
</td>
</tr>
<tr>
<td width="145" valign="top">
<p><label for="sfEmail1"><strong>Your Email : </strong> </label></p>
</td>
<td width="252" align="left" valign="top">
<input class="text" id="sfEmail1" name="emailfrom" type="text" eform="Your email address:email:1"/>
</td>
</tr>
<tr>
<td width="145" valign="top"> </td>
<td width="252"> </td>
</tr>
<tr>
<td width="145" valign="top">
<p><label for="sfName2"><strong>Name of your friend :</strong> </label></p>
</td>
<td width="252" align="left" valign="top">
<input class="text" id="sfName2" name="name2" type="text" />
</td>
</tr>
<tr>
<td width="145" valign="top">
<p><label for="sfEmail2"><strong>Email of your friend : </strong> </label></p>
</td>
<td width="252" align="left" valign="top">
<input class="text" id="sfEmail2" name="email" type="text" eform="Email address of your friend:email:1" />
</td>
</tr>
<tr>
<td width="145" valign="top">
<p align="right">
<!-- Bouton de validation et d'envoi du message -->
<input name="urlsite" type="hidden" value="[(site_url)]" eform="::0::" />
<input name="link" type="hidden" value="[~[*id*]~]" eform="::0::" />
<input name="title" type="hidden" value="[*pagetitle*]" eform="::0::" />
<input class="button" id="sfRecommend" name="recommend" type="submit" value="Send" />
</p>
</td>
<td width="252"> </td>
</tr>
</table>
</form>
And the send to friend report is
<p>Hello [+name2+],</p>
<p> </p>
<p>[+name1+] thought that this would be of interest to you </p>
<p> </p>
<p>Please click this link <a href="[+urlsite+][+link+]"> [+title+] [+description+]</a> to find out more.</p>
<p> </p>
<p style="color: #ccc; font-style: italic;">This message was sent via a page referral at <a href="http://www.prestelandpartner.com%3C/p%3E" target="_blank" rel="nofollow">http://www.prestelandpartner.com</p></a>
<p> </p>
<p> </p>
<p> </p>
And that should work !!!
