title: Opening Bootstrap Modal window On iframe
body: <p>I would like to open a modal dialog of an iframe. When a user clicks the button should load the URL and pop up the URL content as a Modal.</p>
  
  <p>However, for some reasons, this fails as shown on the code below. I am borrowing the idea from this <a href="http://jsfiddle.net/limeric29/C3LkL/" rel="nofollow noreferrer">http://jsfiddle.net/limeric29/C3LkL/</a></p>
  
  <p>The example uses JQuery 1.8 but I would want to use 3.3. I suspect that's the reason for the failure.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('a.btn').on('click', function(e) {
      e.preventDefault();
      var url = $(this).attr('href');
      $(".modal-body").html('&lt;iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="'+url+'"&gt;&lt;/iframe&gt;');
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;a data-toggle="modal" class="btn" href="http://www.bing.com" data-target="#myModal"&gt;click me&lt;/a&gt;
   
   
  &lt;div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
      &lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Anyone lead me?</p>