SimpleModal - Fermeture de l'iframe avec le bouton de fermeture

Question

J'ai donc cherché dans les environs et je n'ai pas trouvé de réponse définitive. Je veux que mon iframe ait un bouton de fermeture pour que les utilisateurs puissent cliquer dessus au lieu d'utiliser la touche ESC pour fermer le conteneur SimpleModal.

J'ai essayé plusieurs choses, mais il ne semble pas que quelque chose soit passé dans l'iframe pour pouvoir fermer le conteneur.

Answer 1

essayez ceci:

$(document).keyup(function (e) { 
     if (e.keyCode == 27) { 
      return; 
     } 
    }); 

Answer 2

Effectuez les opérations suivantes:

parent.$.modal.close(); 

source

Answer 3

J'ai eu le même problème. Cela s'est produit lorsque l'attribut "src" de mon iFrame a utilisé https comme protocole. Dans ce cas, parent.$.modal.close(); ne fonctionnerait pas. Ce que j'ai fait pour y remédier était d'ajouter le bouton de fermeture habituel dont parle Eric sur la page du projet SimpleModal.

Ajouter la ligne closeHTML à votre script modal:

closeHTML:"<a href='#' class='modalCloseImg' alt='Close' title='Close'><a>", 

Cela ajoutera le bouton de fermeture de la en dehors du modal, pas à l'intérieur du iFrame.

Vous devrez ensuite le style le bouton de fermeture, en utilisant cette CSS sur votre page:

<style type="text/css"> 
#simplemodal-container a.modalCloseImg { 
    background:url('http://your.domain.name/your_image_folder/x.png') no-repeat; /* adjust url as required */ 
    width:25px; 
    height:29px; 
    display:inline; 
    z-index:3200; 
    position:absolute; 
    top:-15px; 
    right:-18px; 
    cursor:pointer; 
} 
</style> 

Vous pouvez trouver l'image ici: SimpleModal Demo's x.png

Voici un script complet pour vous:

<script type="text/javascript"> 
// Display an external page using an iframe 
var src = "http://your.domain.name/your_source_file.html"; 
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', { 
    closeHTML:"<a href='#' class='modalCloseImg' alt='Close' title='Close'><a>", /* Add this <a> tag for the Close image to appear. */ 
    containerCss:{ 
     backgroundColor:"#fff", 
     borderColor:"#fff", 
     height:450, 
     padding:0, 
     width:830 
    }, 
    overlayClose:false /* Stops user from clicking overlay to exit modal. */ 
}); 
</script> 

J'espère que cela aide! Vive Paul

Answer 4

-je résoudre cela d'une manière simple, mais j'ai utilisé un lien <a> au lieu d'un bouton, mais est le même.

Tout simplement mettre ceci: class = "SimpleModal-close" Par exemple, si vous voulez un bouton pour fermer: <input type="submit" class="simplemodal-close" value="Close" />

essayer, pas de fonctions, pas onclick = "", rien. Il fonctionne

En supposant que vous utilisez le SimpleModal de: http://www.ericmmartin.com/projects/simplemodal_v101/

Bonne chance!