title: Popcorn.js and jQuery
body: <p>Is there a way to target Popcorn.js elements using jQuery.
  Example: I have this below as a method with a div in the text area. I am adding a close span to attempt to close the parent div if the person does not want to wait the 8 seconds until the element closes. This is in my script.js</p>
  
  <pre><code>example.popupFootnote({ "id": "footnote",
      "start": 2,
      "end": 10,
      "target": "footnotes",
      "title": "Tear Gas",
      "text": '&lt;div id="exampleBox"&gt;&lt;span style="float:right; margin-right:10px"&gt;Close Window&lt;/span&gt;&lt;a href="http://en.wikipedia.org/wiki/Tear_gas"&gt;Tear gas&lt;/a&gt;, formally known as a lachrymatory agent or lachrymator (from lacrima meaning "a tear" in Latin), is a non-lethal chemical compound that stimulates the corneal nerves in the eyes to cause tearing, pain, and even blindness. Common lachrymators include OC, CS, CR, CN, nonivamide, bromoacetone, phenacyl bromide, xylyl bromide and syn-propanethial-S-oxide (from onions). Lacrymators often share the structural element Z=C-C-X, where Z indicates carbon or oxygen, and X indicates bromide or chloride.&lt;/div&gt;',
      top: '10%',
      left: '70%'
  });`
  </code></pre>
  
  <p>So I wan't it when the element 'closeWindow' is clicked then the box its parent closes.</p>
  
  <p>this is in my index.html below my script.js in the HTML between script tags.</p>
  
  <pre><code>$(document).ready(function () {
  
      $('#closeWindow').click(function () {
          $(this).parent().parent().hide();
      });
  
  });
  </code></pre>
  
  <p>The HTML elements are laid out like this:</p>
  
  <pre><code>&lt;div id="movieHolder"&gt;
  
  &lt;div id="video" style="width: 750px; height: 422px;" &gt;&lt;/div&gt;
  
      &lt;div id="overlayDiv"&gt;&lt;/div&gt;
  
      &lt;div id="overlayDiv-Map"&gt;&lt;/div&gt;
  
      &lt;div id="footnotes"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>