0

Estou usando modals do bootscrap 3.3.6 para abrir iframes. O problema que quando implementei tudo no site os iframes carregam antes de abrir os modals. Precisava de uma ajuda para somente o iframe for carregado quando o modal for clicado.

<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"> 

Aqui tenho varios icones dentro no body do primeiro mdoal chamando cada modal com uma 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> 

Já aqui eu deixo a reposta para a chamada com o 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>
4
  • Basta não definir o atributo src do iframe, configure ele apenas depois que abrir o modal. Easy. Commented 9/02/2016 às 19:44
  • Bruno. Não entendi muito o que quiz dizer. Ele está no modal-body, uso os iframes para abrir no body. O que acontece é que quando abro a página começa a carregar todos esses iframes dentro dos modals. E uso muitos modals com iframes. Commented 9/02/2016 às 19:54
  • Eu fiz agora retirando o atributo src do iframe e fiz a chamada por id. O link deixei em js. No primeiro teste funcionou. Vou refazer no site inteiro e se der certo eu vou postar uma resposta. Quem tiver soluções e quiser compartilhar fique a vontade. Commented 9/02/2016 às 23:19
  • Continua carregar antes de abrir o modal. Mais agora os iframes respondem como devem. Precisaria agora que a iframe só fosse carregada no momento do click no modal e como colocar vários src no js. Commented 10/02/2016 às 3:31

1 Resposta 1

0

Minha solução foi a seguinte:

1° Criei o modal normal, e onde eu queria colocar o iframe que no caso era no modal-body deixei somente assim:

Obs. Talvez precise ajustar a janela com width height frameborder

2° Ai no javaScript que vem o segredo:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .