Modal loading iframe before being opened

Question

Modal loading iframe before being opened

Navigation

#1 by (0 votes)

0

I'm implementing in a portal several iframe links in the modals. Some come with the first modal with several icons to enter the next modal with the iframe (modal on modal). When I started to implement it was working fine, but then I realized that it started to cause problems because when I enter the main page the iframes are preloaded in the modals. And when I enter modals with iframes they do not respond to the original iframe requests.

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

Then when I enter the page, the site takes a long time to load the iframes to make them preloaded.

javascript html

asked by anonymous 09.02.2016 / 13:47

1 answer

Doubt with DATEDIFF days range between dates Wordpres error 404 - Not Found The requested URL was not found on this server

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:

<iframe/>

Obs. 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 E INTERNO');
})
  $('#MyModal').on('hide.bs.modal', function () {
  $('#MyModal iframe').removeAttr('src');
})

It perfectly suited my needs.