load iframe in bootstrap modal

Question

I want to load an iframe into a bootstrap modal and show a loader before the iframe is loaded  I am using a simple jquery click function  but it is not working  I do not understand why it is not working  fiddle  full page fiddle      btn   click function             modal   on  show  function                   this  find  iframe   attr  src   http   www google com                  modal   modal  show true          iframe   load function                 loading   hide

User · Answer

I also wanted to load any iframe inside modal window. What I did was, Created an iframe inside Modal and passing the source of target iframe to the iframe inside the modal.

_x000D_

function closeModal() {_x000D_
  $('#modalwindow').hide();_x000D_
  var modalWindow = document.getElementById('iframeModalWindow');_x000D_
  modalWindow.src = "";_x000D_
}

_x000D_

.modal {_x000D_
  z-index: 3;_x000D_
  display: none;_x000D_
  padding-top: 5%;_x000D_
  padding-left: 5%;_x000D_
  position: fixed;_x000D_
  left: 0;_x000D_
  top: 0;_x000D_
  width: 100%;_x000D_
  height: 100%;_x000D_
  overflow: auto;_x000D_
  background-color: rgb(51, 34, 34);_x000D_
  background-color: rgba(0, 0, 0, 0.4)_x000D_
}

_x000D_

<!-- Modal Window -->_x000D_
<div id="modalwindow" class="modal">_x000D_
  <div class="modal-header">_x000D_
    <button type="button" style="margin-left:80%" class="close" onclick=closeModal()>&times;</button>_x000D_
  </div>_x000D_
  <iframe id="iframeModalWindow" height="80%" width="80%" src="" name="iframe_modal"></iframe>_x000D_
</div>

_x000D_

User · Answer

It seems that your      modal   on  shown bs modal        One way Or   You can do this in a slight different way  like this       btn   click function           Send the src on click of button to the iframe  Which will make it load          openifrmahere   find  iframe   attr  src   http   www hf-dev info            modal   modal  show true           Hide the loading message         openifrmahere   find  iframe   load function                 loading   hide

User · Answer

You can simply use this bootstrap helper to dialogs  only 5 kB   it has support for ajax request  iframes  common dialogs  confirm and prompt   you can use it as   eModal iframe  http   someUrl com    This is a tile for iframe   callbackIfNeeded    eModal alert  The message    This title     eModal ajax   mypage html    This is a ajax   callbackIfNeeded    eModal confirm  the question    The title   theMandatoryCallback    eModal prompt  Form question    This is a ajax   theMandatoryCallback     this provide a loading progress while loading the iframe   No html required   You can use a object literal as parameter to extra options   Check the site form more details   best

User · Answer

I came across this implementation in Codepen  I hope you find it helpful   this on  hidden bs modal   function            this  find  iframe   html     attr  src

User · Answer

modal   on  shown bs modal  function           correct here use  shown bs modal  event which comes in bootstrap3     this  find  iframe   attr  src   http   www google com        As shown above use  shown bs modal  event which comes in bootstrap 3   EDIT  -  and just try to open some other url from iframe other than google com  it will not allow you to open google com due to some security threats   The reason for this is  that Google is sending an  X-Frame-Options  SAMEORIGIN  response header  This option prevents the browser from displaying iFrames that are not hosted on the same domain as the parent page

User · Answer

Bootstrap event for modal load was changed in Bootstrap 3  just use shown bs modal event       modal   on  shown bs modal   function           this  find  iframe   attr  src   http   www google com          More can found on the event at the below link   http   getbootstrap com javascript

[javascript] load iframe in bootstrap modal

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to iframe