Solution for modal not loading iFrame automatically

Question

Solution for modal not loading iFrame automatically

Navigation

#1 by (0 votes)

0

I'm using bootscrap 3.3.6 modals to open iframes. The problem that when I implemented everything on the site the iframes load before opening the modals. I needed help if only the iframe is loaded when the modal is clicked.

<a href="#despesas" role="button" data-toggle="modal" data-target="#despesas" target="" class="col-lg-1 col-md-2 col-sm-3 col-xs-6 text-center home">
  <img src="icones/icone_despesas.png" alt="Despesas" />
</a>

<!--  ICONES SUBMENU - DESPESAS--> <div class="modal fade" id="despesas">
<div class="modal-layout">
  <div class="modal-content">
    <div class="modal-header">
       <button type="button" class="close" class="blank" title="Fechar" data-dismiss="modal" aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
       </button>
       <h2 class="modal-title">Despesas</h2>
     </div>
     <div class="container"></div>
     <div class="modal-body">

Here I have several icons inside the body of the first mdoal calling each modal with an iframe:

<!--  ICONE Despesas por credor    OK-->                           
<a data-toggle="modal" role="button" data-target="#despesascredor">
 <img src="icones/sub_menus/icone_despesas_credor.png" alt="Despesa" class="col-lg-3 col-md-4 col-sm-3 col-xs-6 text-center sub"/>
</a>

Already here I leave the answer to the call with the iframe:

<div class="modal fade" id="despesascredor" data-remote= >
  <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" class="blank" title="Fechar" data-dismiss="modal" aria-label="Fechar">
           <span aria-hidden="true">&times;</span>
         </button>
         <h2 class="modal-title">Despesas por credor</h2>
       </div>
       <div class="modal-body text-center">
         <iframe id= "iframe_betha" src="LINK" />
       </div>
     </div>
   </div>
 </div>

html bootstrap-3

asked by anonymous 09.02.2016 / 20:10

1 answer

https access in AWS does not work Convert 'const std :: string' to 'std :: string &'

score 0 · Accepted Answer

My solution was as follows:

I created the modal normal, and where I wanted to put the iframe that in the case was in the modal-body I left it just like this:

Note You may need to adjust the window with width height frameborder

2 ° Ai in javaScript that comes the secret:

 $('#MyModal').on('show.bs.modal', function () {
 $('#MyModal iframe').attr('src','LINK EXTERNO ou INTERNO');
})
 $('#MyModal').on('hide.bs.modal', function () {
 $('#MyModal iframe').removeAttr('src');
})