Modal loading iframe before opening

Question

I am implementing in a portal several iframe links in the modals. Some arrive to have the first modal with several icons to enter the next modal with iframe (modal on modal). When I started to implement everything was working fine, but then I realized that it started to give problem because when I enter the main page the iframes are pre-loaded in the modals. And when I enter the 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 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>

Then when I enter the page, the site is long time loading the iframes to leave pre-loaded.

Answer 1

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:

<iframe/>

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

Perfectly supplied my needs.