web-dev-qa-db-fra.com

JQuery Modal Boxes et Iframe

J'utilise Simple Modal et je sens que cela ne correspond pas à ce dont j'ai besoin pour le moment.

Existe-t-il une boîte modale prenant en charge le chargement de fichiers externes et permettant à ces fichiers externes de fermer la boîte modale et de rediriger la page parente vers une URL?.

Un exemple de ce que je veux faire. Vous avez une liste d'utilisateurs, vous pouvez cliquer sur "Ajouter un utilisateur" et une boîte modale avec le formulaire apparaît, vous la remplissez et vous l'envoyez. Cela fermerait la boîte et rechargerait la page de la liste des utilisateurs afin de voir l’utilisateur dans la liste.

Ensuite, vous pouvez cliquer sur "Modifier l'utilisateur" et une boîte de dialogue modale contenant les informations utilisateur renseignées apparaîtra dans les champs du formulaire. Vous pourrez ainsi éditer, soumettre, fermer et actualiser.

Je sais que cela peut être fait si j'ai le formulaire d'informations utilisateur en tant que div masqué pour chaque utilisateur, mais cela ne permettra pas une bonne adaptation et il y a beaucoup de données supplémentaires.

J'ai trouvé un code à ce sujet sur Google Code mais je n'arrive pas à le faire fonctionner (éventuellement une version modale simple différente

Je suis prêt à passer à un autre outil de boîte modale également.

METTRE À JOUR:

Est-ce que Thickbox ou Fancybox prend en charge la fermeture d'un élément IFrame enfant?

javascriptjqueryiframerefreshmodal-dialog
18
Ólafur Waage

Fancybox est également une autre option. Fonctionne de la même manière que Thickbox

EDIT: 

Il semble, après quelques essais, que le plug-in ne prend pas en charge de manière native la fermeture de la Fancybox via un élément iframe enfant. Je pense que cela est certainement réalisable avec un petit effort (j’ai commencé piratage} _ensemble quelque chose ici , bien que je souligne qu’il s’agissait simplement d’un POC et ne fonctionnait pas comme un bouton dans l'iframe supprime le wrapper div fancybox du DOM et ne s'affiche donc pas lorsque vous cliquez à nouveau sur l'image de Google). Je me demande toutefois si un iframe est la ligne droite à supprimer.

Pour ajouter un utilisateur, je pensais que vous pourriez lui présenter un formulaire modal similaire à celui du site Monster que vous obtenez lorsque vous cliquez sur 'Connexion'. Une fois que vous avez cliqué sur ajouter un utilisateur, passez un appel AJAX à votre source de données pour insérer un nouvel utilisateur, puis, en cas de succès, vous pouvez soit lancer un rafraîchissement de la page, soit utiliser AJAX pour mettre à jour. la liste.

Pour éditer un utilisateur, une fois qu'un utilisateur est sélectionné, vous pouvez effectuer un appel AJAX avec un ID utilisateur pour renseigner un formulaire modal avec les détails de l'utilisateur extraits de votre source de données lorsque le AJAX appel renvoie le succès. Une fois que vous avez terminé de modifier l'utilisateur, passez un appel AJAX pour mettre à jour votre source de données, puis lancez à nouveau un rafraîchissement de la page ou utilisez AJAX pour mettre à jour la liste.

Au lieu de l'actualisation de la page ou de l'appel final AJAX dans chaque scénario, vous pouvez simplement utiliser JavaScript/jQuery pour mettre à jour la liste/les détails de la liste, selon qu'un utilisateur a été ajouté ou modifié, respectivement.

9
Russ Cam

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 code JavaScript suivant dans iFrame:

parent.$.fn.fancybox.close();
16
Blegger

Vous trouverez ci-dessous une interaction de dialogue de base: chargement du contenu dans un iFrame, puis fermeture du dialogue à partir de iFrame.

Notez que pour illustrer cela, j'ai deux extraits de code. Le premier est nommé fichier1.html. La seconde, vous devez nommer "myPage.html" si vous voulez que cela fonctionne et le placer dans le même répertoire que le premier fichier.

Notez que l'appel à la fermeture de la boîte de dialogue peut être utilisé d'une autre manière en fonction de la fonctionnalité souhaitée. Par exemple, un autre exemple pourrait être une soumission de formulaire réussie.

Créez les fichiers localement sur votre système, ouvrez fichier1.html et essayez-le.

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>

myPage.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>
13
Josh Metcalfe

parent.$.modal.close(); fonctionne pour un plugin modal simple.

3
Francisco

c'est le script de dialogue quand 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 à 95%, parce que la boîte de dialogue défile toujours visible à l'écran T.T

1
sting

J'ai trouvé la solution pour moi, elle utilise nyroModal. Il supporte les iframes et la fermeture du modal via son fils iframe avec ce code.

parent.$.nyroModalRemove();

Je vais accepter la réponse de Russ Cam pour lui donner plus de rep, car sa réponse m'a beaucoup fait réfléchir à la manière dont cela va fonctionner et m'a finalement amené à trouver la réponse.

1
Ólafur Waage

Avez-vous essayé ThickBox ?

0
mathieu

Mon FrameDialog le permettra, il s’étend essentiellement au dialogue ... si vous utilisez le même domaine, vous devriez pouvoir appeler $ .FrameDialog.close (), mais si vous redirigez, vous pouvez simplement rediriger le parent. window.parent.location fera l'affaire.

http://plugins.jquery.com/project/jquery-framedialog

0
Tracker1

HI, Toute personne éprouvant des difficultés à fermer une Fancy Box iFrame à l’aide d’une installation manuelle de Fancy Box dans Wordpress 3.0:

Utilisez ce lien dans votre iframe:

<a href="#" onClick="parent.jQuery.fancybox.close();" title="Close window">close fancybox</a>

Ça marche :)

0
dave

Cela fonctionne pour moi ...

<input name="Envoyer" value="Annuler" type="button" onclick="javascript:window.parent.$.fancybox.close();" />
0
Matthieu

Essayez colorbox c’est aussi un bon choix.

0
235