title: In Bootstrap open Enlarge image in modal
body: <p>How do I <code>open / enlarge</code> an image in a modal using jquery / js and <strong>not data attributes</strong>? </p>
  
  <p>Anytime a user inserts an image into a content editor I need it to be clickable to expand in a modal with js, so I cannot rely on the user to input data attributes they don't know how to use.</p>
  
  <p>I tried:-</p>
  
  <pre><code>&lt;a href="/myImage.png" id="pop"&gt;
      &lt;img src="/myImage.png" style="width: 400px; height: 264px;"&gt;
      Click to Enlarge
  &lt;/a&gt;
  </code></pre>
  
  <p><strong><code>jQuery :-</code></strong></p>
  
  <pre><code>$("#pop").on("click", function() {
     $(this).modal();
  });
  </code></pre>
  
  <p>Do I need to add info to the jquery to pass the image source to appear in the modal?</p>
  
  <p>Thank you!!!</p>