Charger un iframe scr uniquement sur modal open

Question

Mon client veut suivre si un modal est ouvert par un visiteur, la seule façon qui m'est venue était de charger un iframe dans le modal, et ensuite ils ont une URL à suivre. Mais l'URL est chargée, que le modal soit ouvert ou non.

J'ai trouvé this qui semble être ce que je veux, ils utilisent Bootstrap pendant que j'utilise Foundation6, j'ai essayé de le convertir pour fonctionner pour Foundation mais il me manque clairement quelque chose.

De toute évidence, il peut y avoir une meilleure façon d'obtenir ce dont j'ai besoin sans le dessous?

modaux:

<div id="bookDemo" class="reveal-modal medium" data-id="0" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog"> 
    <div class='iframe-container-book'> 
    <iframe src="" scrolling="no" style='border:0'></iframe> 
    </div> 
    <a class="close-reveal-modal" aria-label="Close">&#215;</a> 
</div> 

<div id="getQuote" class="reveal-modal medium" data-id="1" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog"> 
    <div class='iframe-container-quote'> 
    <iframe src="" scrolling="no" style='border:0'></iframe> 
    </div> 
    <a class="close-reveal-modal" aria-label="Close">&#215;</a> 
</div> 

<div id="getBrochure" class="reveal-modal medium" data-id="2" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog"> 
    <div class='iframe-container-brochure'> 
    <iframe src="" scrolling="no" style='border:0'></iframe> 
    </div> 
    <a class="close-reveal-modal" aria-label="Close">&#215;</a> 
</div> 

Le script:

var iframes = ["URL1","URL2","URL3"]; 

$('.reveal-modal').on('open.zf.reveal', function() { 
    var loaded = $(this).data('loaded'); 

    if(loaded == false) { 
     var id = $(this).data('id'); 
     $(this).find('iframe').attr('src',iframes[id]); 

     $(this).data('loaded', 'true'); 
    } 
}); 

Answer 1

Vous n'avez pas besoin iframe, à moins que le iframe contient son propre contenu ou JavaScript. Envoyez simplement une requête AJAX au serveur avec l'URL (et si nécessaire les paramètres de requête).

Vous devez cependant avoir un événement .on ('open.zf.reveal', ...). Il n'y a pas moyen de contourner cela puisque vous voulez savoir quand le modal est ouvert. Fondamentalement, tout ce qui doit se produire dans le modal quand il est ouvert doit être fait dans la fonction d'événement. Vous ne devriez donc pas avoir de contenu prédéfini dans le modal.

Espérons que cela aide.

Answer 2

droit, je pense que je l'ai ...

modaux:

<div id="bookDemo" class="reveal-modal medium" data-id="0" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog"> 
    <div class='iframe-container-book'></div> 
    <a class="close-reveal-modal" aria-label="Close">&#215;</a> 
</div> 
<div id="getQuote" class="reveal-modal medium" data-id="1" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog"> 
    <div class='iframe-container-quote'></div> 
    <a class="close-reveal-modal" aria-label="Close">&#215;</a> 
</div> 
<div id="getBrochure" class="reveal-modal medium" data-id="2" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog"> 
    <div class='iframe-container-brochure'></div> 
    <a class="close-reveal-modal" aria-label="Close">&#215;</a> 
</div> 

Le script:

var appendIFrameDemo = true; 
var appendIFrameQuote = true; 
var appendIFrameBrochure = true; 
$(".bookDemo").click(function() { 
    if(appendIFrameDemo) { 
     $('.iframe-container-book').append(' <iframe src="http://www.nursecallsystems.co.uk/modal-book" scrolling="no" style="border:0"></iframe> '); 
     appendIFrameDemo = false; 
    } 
}); 
$(".getQuote").click(function() { 
    if(appendIFrameQuote) { 
     $('.iframe-container-quote').append(' <iframe src="http://www.nursecallsystems.co.uk/modal-quote" scrolling="no" style="border:0"></iframe> '); 
     appendIFrameQuote = false; 
    } 
}); 
$(".getBrochure").click(function() { 
    if(appendIFrameBrochure) { 
     $('.iframe-container-brochure').append(' <iframe src="http://www.nursecallsystems.co.uk/modal-brochure" scrolling="no" style="border:0"></iframe> '); 
     appendIFrameBrochure = false; 
    } 
}); 

.bookDemo, .getQuote & .getBrochure sont les classes sur les trois boutons pour ouvrir les modaux.