This page provides instructions on how to post a FAIRtax PopVox Widget in a "light box" as done on ca4fairtax.org

The FAIRtax PopVox widget uses the JQuery Dialog functionality to present the PopVox Widget in a separate iframe. This keeps the visual footprint of the widget small while supporting the full functionality of the widget when the launch image is clicked on.

Here's what the final implementation looks like:

1. To implement the lightbox dialog place the following code between the head tags on your website:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" >
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>

$(function() {
$( "#dialog-message" ).dialog({
modal: true,
autoOpen: false,
height: 825,
width: 400
});
});

function voteNow(){
$('#dialog-message').dialog('open');
return false;
}
</script>

2. Place the following code between the body of your document.

<!-- Link to the widget -->
<a href="" onclick="return voteNow();"><img src="http://ca4fairtax.org/images/votenow.jpg" border="0" /></a>

<!-- Lightbox dialog -->
<div id="dialog-message" title="Vote for the FairTax!">
<p>
<iframe src="https://www.popvox.com/stakeholders/widget-instructions/242" scrolling="no" height="725" width="350"></iframe>
</p>
</div>