Solution for modal not load iframe automatically

Asked

Viewed 603 times

0

I’m using bootscrap 3.3.6 modals to open iframes. The problem that when I implemented everything on the site iframes carry before opening the modals. Needed help for only iframe loaded when 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 for the call with 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

  • Just don’t set the attribute src of iframe, configure it only after opening the modal. Easy.

  • Bruno. I didn’t understand much of what I meant. He’s in the modal-body, I use the iframes to open in the body. What happens is that when I open the page starts loading all these iframes inside the modals. And I use many modals with iframes.

  • I did now by removing the src attribute from iframe and made the call by id. The link I left in js. In the first test it worked. I will redo the entire site and if it works I will post a response. Who has solutions and want to share is at will.

  • Continue pressing before opening the modal. More now iframes respond as they should. It would now need the iframe only to be loaded at the time of the modal click and how to put several src in js.

1 answer

0


My solution was this::

1° I created the modal normal, and where I wanted to put the iframe which in this case was in modal-body left only so:

obs. You may need to adjust the window with width height frameborder

2° Alas in the Bible the secret comes:

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

Browser other questions tagged html bootstrap-3

You are not signed in. Login or sign up in order to post.