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();
    });
})

Answer 1

$('.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.

Answer 2

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/

Answer 3

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,

Answer 4

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", "");
    });

Answer 5

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();
    });
})

Answer 6

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.

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

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

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

Answer 7

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

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

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