title: Boostrap 3.0 Modal and Elevate zoom glitch
body: <p>I have Elevate Zoom working within a bootstrap 3 modal element and all works fine after following an answer found here: </p>
  
  <p><a href="https://stackoverflow.com/questions/22742159/elevatezoom-dont-work-in-bootstrap-modal">ElevateZoom don&#39;t work in bootstrap modal</a></p>
  
  <p>Using the code given in the answer to the link above I have elevate zoom kicking in when a modal is launched. except when I close the modal I still get an area on my page that is invisible but when I hover over it, the enlarged (zooming) image is still shown in the corner of the page. </p>
  
  <p>The code I used is based off this:</p>
  
  <pre><code>$(document).ready(function () {
      $('#myModal').on('shown.bs.modal', function() {
          $("#zoom_05").elevateZoom({
              zoomType: "inner",
              cursor: "crosshair"
          });
      })
  });
  </code></pre>
  
  <p>I'm guessing this activates the elevate zoom script but does not kill the zoom plugin when I close the modal so I am still getting an active area when I go back to the page.</p>
  
  <p>Using the inspector I see every time I open the modal a new instance of the following code is added to my HTML:</p>
  
  <pre><code>&lt;div class="zoomContainer" style="position: absolute; left: 0px; top: 51293px; height: 402px; width: 568px;&gt;&lt;/div&gt;"    
  </code></pre>