Boîtes modales JQuery et Iframe
j'ai utilisé le Modal Simple et j'ai l'impression qu'il n'est pas à la hauteur de ce dont j'ai besoin en ce moment.
y a-t-il une boîte modale qui supporte le chargement de fichiers externes et permet à ces fichiers externes de fermer la boîte modale et de rediriger la page mère vers une url.
Un exemple de ce que je veux faire. Vous avez une liste d'utilisateurs, vous pouvez cliquer sur "Ajouter utilisateur" et une boîte modale avec le formulaire apparaît, vous remplissez cela et le soumettre. Qui fermerait la boîte et rechargerait la liste des utilisateurs page donc vous verriez l'utilisateur dans la liste.
alors vous pouvez cliquer sur "Éditer l'utilisateur" et une boîte modale avec les informations de l'utilisateur rempli dans les champs de formulaire apparaîtrait et vous pourriez éditer, soumettre et il fermerait et rafraîchirait.
je sais que cela peut être fait si j'ai le formulaire d'information utilisateur comme une div cachée pour chaque utilisateur, mais cela ne sera pas échelle bien et il ya beaucoup de données aériennes.
j'ai trouvé quelques code à ce sujet sur Google Code mais je n'arrive pas à le faire fonctionner (peut-être une autre version modale simple
je suis prêt à passer à un autre outil de boîte modale aussi.
mise à jour:
est-ce que le support Thickbox ou Fancybox est fermé à un élément IFrame enfant?
11 réponses
Fancybox est aussi une autre option. Fonctionne de la même façon que Thickbox
EDIT:
il apparaît après quelques jeux que le plugin ne supporte pas nativement la fermeture de la Fancybox à travers un élément iframe d'enfant. Je pense que c'est certainement réalisable avec un peu d'effort (j'ai commencé piratage ensemble quelque chose ici, bien que je souligne qu'il s'agissait simplement D'un POC et ne fonctionne pas comme le bouton dans l'iframe supprime la FancyBox div wrapper du DOM et ne s'affiche donc pas lorsque vous cliquez à nouveau sur l'image google).Je me demande cependant si une iframe est la bonne ligne à suivre.
Pour ajouter un utilisateur, ma pensée serait que vous pourriez présenter à l'utilisateur un formulaire modal, comme celle sur le Monster site que vous obtenez lorsque vous cliquez sur " se connecter.' une fois que vous cliquez sur Ajouter un utilisateur, faites un appel AJAX à votre datasource pour insérer un nouvel utilisateur et puis à votre retour, vous pouvez soit lancer un rafraîchissement de page, soit utiliser AJAX pour mettre à jour la liste.
pour éditer un utilisateur, une fois qu'un utilisateur est sélectionné, vous pouvez faire un appel AJAX avec un identifiant d'utilisateur pour remplir un formulaire modal avec les détails d'utilisateur récupérés à partir de votre source de données lorsque L'appel AJAX retourne succès. Une fois que vous avez terminé d'éditer l'utilisateur, faites un appel AJAX pour mettre à jour votre datasource et puis encore, initiez un rafraîchissement de page ou utilisez AJAX pour mettre à jour la liste.
au Lieu de la page rafraîchir ou appel AJAX final dans chaque scénario, vous pouvez simplement utiliser JavaScript/jQuery pour mettre à jour les détails de la liste, selon qu'un utilisateur a été ajouté ou modifié, respectivement.
on dirait que vous avez déjà trouvé la réponse mais pour le bénéfice des autres vous pouvez fermer une implémentation iFrame de FancyBox en utilisant le JavaScript suivant dans l'iFrame:
parent.$.fn.fancybox.close();
ci-dessous est une interaction de dialogue de base chargement du contenu dans une iFrame, puis fermeture de la boîte de dialogue à partir de l'iFrame.
notez que pour illustrer ceci j'ai deux extraits de code. La première est intitulée fichier1.HTML. À la seconde où vous devez nommer "myPage.html si vous le souhaitez et de les placer dans le même répertoire que le premier fichier.
notez que l'appel à fermer la boîte de dialogue peut être utilisé d'autres façons selon la fonctionnalité désirée. Par exemple un autre exemple pourrait être sur le succès de la soumission du formulaire.
créer les fichiers localement sur votre système et ouvrir file1.html et de l'essayer.
fichier1.html
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/>
<script type="text/javascript">
$(document).ready(function() {
$("#modalDiv").dialog({
modal: true,
autoOpen: false,
height: '180',
width: '320',
draggable: true,
resizeable: true,
title: 'IFrame Modal Dialog'
});
$('#goToMyPage').click(
function() {
url = 'myPage.html';
$("#modalDiv").dialog("open");
$("#modalIFrame").attr('src',url);
return false;
});
});
</script>
</head>
<body>
<a id="goToMyPage" href="#">Go to My Page</a>
<div id="modalDiv"><iframe id="modalIFrame" width="100%" height="100%" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" title="Dialog Title"></iframe></div>
</body>
</html>
mapage.html
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#clickToClose').click(
function() {
window.parent.$("#modalDiv").dialog('close');
return false;
});
// uncomment and use the below line close when document is ready (no click action by user needed)
// the same call could be put elsewhere depending on desired functionality (after successful form submit, etc.)
// window.parent.$("#modalDiv").dialog('close');
});
</script>
</head>
<body>
<a id="clickToClose" href="#">Click to close.</a>
</body>
</html>
parent.$.modal.close(); fonctionne pour le plugin modal simple.
j'ai trouvé la solution pour moi, c'est en utilisant nyroModal. Il supporte les iframes et la fermeture du modal à travers son iframe child avec ce code.
parent.$.nyroModalRemove();
je vais accepter Russ Cam réponse à lui donner plus de rep depuis sa réponse m'a fait beaucoup réfléchir sur la façon dont cela va fonctionner et finalement m'a fait trouver la réponse.
c'est le script de dialogue lorsque j'ai tracé avec firebug
<iframe>
scrolling="auto"
height="100%"
frameborder="0"
width="100%"
title="Dialog Title"
marginheight="0"
marginwidth="0"
id="modalIFrame"
src="test.php"
</iframe>
j'ai besoin de changer la hauteur de 95%, parce que la boîte de dialogue de défilement toujours visible à l'écran T. T
mon FrameDialog va permettre cela, il s'étend essentiellement sur la boîte de dialogue... si vous utilisez le même domaine, vous devriez pouvoir appeler $.FrameDialog.close () cependant, si vous redirigez, vous pouvez simplement rediriger le parent. fenêtre.parent.emplacement fera.
HI, Quiconque a de la difficulté à fermer une boîte de fantaisie iFrame en utilisant une installation manuelle de la boîte de fantaisie dans Wordpress 3.0:
Utilisez ce lien dans votre iframe:
<a href="#" onClick="parent.jQuery.fancybox.close();" title="Close window">close fancybox</a>
Ça fonctionne :)
Cela fonctionne pour moi...
<input name="Envoyer" value="Annuler" type="button" onclick="javascript:window.parent.$.fancybox.close();" />