[JavaScript] Créer une fenêtre intérieure à la page à la Moodalbox ! [Résolu]

Signaler
Messages postés
18
Date d'inscription
dimanche 10 août 2008
Statut
Membre
Dernière intervention
25 janvier 2009
-
Messages postés
18
Date d'inscription
dimanche 10 août 2008
Statut
Membre
Dernière intervention
25 janvier 2009
-
Bonjour à tous,
Voila je fais mon premier site et viens donc de me mettre à Javascript (j'ai déjà des notions de HTML et PHP/MySQL). J'aurais aimé faire une fonctions permettant d'ouvrir un document .php ou .html dans un cadre un peut à la manière de la Moodalbox.
Bien sur je n'en suis qu'au début donc je voudrais juste faire ceci sans animation, dans l'idéal comme lors de l'authentification sur CodeS-SourceS. Voila pour résumé lorsque je clique sur un lien la fenetre s'ouvre en milieu de page, le reste de la page se grisant.
Vous me direz pourquoi n'utilise tu pas la MoodalBox? Pour deux raisons:
- J'aimerais savoir faire cela par moi même.
- Elle ne fontionne pas correctement avec l'organisation de mon site.

Pour ce qui est de mon site, celui ci se compose ainsi:

   
...

   
...

   
...

   
...

        ...
   

Le tableau a en fait été généré par photoshop et contient les images formant le fond du site.
Les div ont été définits de façon absolue.

Voila un grand merci à tous ceux qui m'aideront et en aurant le courage .

28 réponses

Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
32
Pour le div il faut quil prenne toute la page et que le z-index soit suppérieur a celui de la page...

Donc oui ça désactive la page qui est en dessous...

Pour ajax jai fais un tuto ici, tu peus le regarder (je pense qu'il y en a d'autres)...

a++

Si la réponse vous convient, pensez : Réponse acceptée !
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
32
Salut,

Pour ouvrir une boite comme celle de code source, un div suffis avec AJAX, je m'explique :

Tu met un div (vide) dans ta page et au déclenchement d'un évènement tu met le z-index du div au dessus de celui des autre et tu me la couleur en noir et l'opacité a 30%...

Tu met un autre div et tu fais un innerHTML de ta page avec ajax !

a++

Si la réponse vous convient, pensez : Réponse acceptée !
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
bonjour,

>>J'aurais aimé faire une fonctions permettant d'ouvrir un document .php ou .html dans un cadre
iframe
>>le reste de la page se grisant.
opacité

ch'tiot exemple ?

<html>

    <head>

        <script type="text/javascript">

            function griser(prm)

            {    document.getElementById("aff").style.display=prm;    }

        </script>

    </head>

   

        exemple de texte

        exemple de texte

        exemple de texte

        exemple de texte

       

        exemple de texte

        exemple de texte

        exemple de texte

        exemple de texte

       

       

   

</html>

à toi d'adapter à ce que tu veux.

CordialementBul[mon Site][M'écrire], <!--
Messages postés
18
Date d'inscription
dimanche 10 août 2008
Statut
Membre
Dernière intervention
25 janvier 2009

@Nicomilville: Je connais pas du tout l'Ajax, j'aurais donc deux question pour toi:
          - Tu me la couleur en noir et l'opacité a 30% // comment faire cela et le reste de la page est il donc désctivé?
          - Tu met un autre div et tu fais un innerHTML de ta page avec ajax ! // la je bug

@Bultez: Merci pour ton morceau de code, mais lorsque je fais le test avec :

Seul l'iframe est grisé, et est il possible d'avoir une fonction dans la page affiché dans l'iframe pour revenir à la page mère?

Merci a vous.
Messages postés
18
Date d'inscription
dimanche 10 août 2008
Statut
Membre
Dernière intervention
25 janvier 2009

@Nicomilville:
D'accord j'ai bien compris pour le div, et je me penche sur l'ajax pour comprendre comment insèrer une page html dans le div.

Merci encore, je vous tiens au jus de mon avancement ^^
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
>>Seul l'iframe est grisé,
ben oui... puisque l'opacité est appliqué à l'iframe
soit tu adaptes la page chargée dans cet iframe,
soit tu combines iframe et div pour obtenir ce que tu veux.

>>et est il possible d'avoir une fonction dans la page affiché dans l'iframe pour revenir à la page mère?
?? pas  compris.
peut-être veux-tu "recacher" l'iframe ?
un "machin" qui fasse griser('none') dans la page affichée dans l'iframe

          Cordialement     Bul   [mon Site]  [M'écrire], <!--
Messages postés
18
Date d'inscription
dimanche 10 août 2008
Statut
Membre
Dernière intervention
25 janvier 2009

Bon ben c'est officiel je suis nul ^^
Je n'ai meme pas trouver ton tuto....
Par contre une chose me turlupine; si jamais j'utilise cette technique, il me sera impossible de la transformer afin de pouvoir l'utiliser en incluant un simple fichier .js par exemple..

A vrai dire j'aurais voulu faire cela en javascript afin de pouvoir le réutiliser plus tard. Comme je l'ai dit, faire ma propre moodalbox ^^.
Messages postés
18
Date d'inscription
dimanche 10 août 2008
Statut
Membre
Dernière intervention
25 janvier 2009

@bultez:
En fait je voulais juste dire fermer l'iframe, mais j'ai lu que les iframe étaient plutot déconseiller
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
>>En fait je voulais juste dire fermer l'iframe,
ben... j'ai répondu ( met style.display='none' )

>>mais j'ai lu que les iframe étaient plutot déconseillées
ah bon ? par quel guru stupide ?
    tu confonds peut-être référencement d'un site, et là, franchement, je
       m'en tamponne le coquillard, et iframe !!! et ça n'a rien à voir.
1° si tu n'utilises pas ajax, qui est mis à toutes les sauces,
    et généralement inutilement [ @nico ;o)) ],
    c'est une manière de faire pour avoir une réponse du serveur
    mais un bête formulaire fait généralement mieux l'affaire !
    ajax étant fait pour renvoyer des données, pas une page
2° un div, ne va pas être au dessus de tout ( ne serait-ce que
        les select avec IE par exemple )
 
>>pouvoir l'utiliser en incluant un simple fichier .js par exemple..
aïe, aïe... tu vas te lancer dans l'interprétation de js
      dans une réponses d'ajax ! c'est TOUJOURS inutile.
      met ton .js dans la page appelante et point barre.

tu vas te compliquer la vie.... inutilement.
mais bon, c'est comme tu le sens après tout.

CordialementBul[mon Site][M'écrire], <!--
Messages postés
18
Date d'inscription
dimanche 10 août 2008
Statut
Membre
Dernière intervention
25 janvier 2009

Je suis ouvert a tout car je ne connais pas la moitié des choses que vous connaissez ^^.
Peut etre serait il possible de converser via msn si tu en as un pour pouvoir interagir facilement. Si tu es ok mp moi.

Merci d'avance, je me penche toujours sur mon prob, afin de le faire soit en html, php ou javascript.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
je n'utilise pas msn. je pense ne jamais utiliser.
on peut me contacter directement ( ou presque  )  :  voir ma signature.
mais surtout, ce n'est absulement pas justifié !
       plus d'intervenants, plus de compétences sur ce forum, donc plus de chances de réponses.
       les réponses peuvent aider d'autres personnes.
à mon avis, fait des choses simples dans un 1er temps,
après tu pourras compliquer à loisir.
je t'ai donné les pistes pour faire ( simplement justement )
essaye, fais des tests.... et dis nous ce qui ne va pas
on t'aidera à mettre au point.

CordialementBul[mon Site][M'écrire], <!--
Messages postés
18
Date d'inscription
dimanche 10 août 2008
Statut
Membre
Dernière intervention
25 janvier 2009

Bien alors je vais exposer ce que je souhaiterais réaliser:
Ma page se décompose en plusieurs cellules graphiques dont les div ont été placés via dreamweaver. Le tout est dans un conteneur, que j'ai utilisé afin de palier au problème de résolution; ainsi la page est toujours centrée et les div toujours là ou il faut.
Cette page est en fait une page d'administration où en haut a droite de chaque cellule se situe une icône (image) qui permet de rajouter un élément à la BD.
Je voudrais donc qu'en cliquant sur cette icône, une fenêtre interne (iframe, fenetre modale...) apparaisse affichant une page php. Ainsi seule cette fenêtre deviendrait active le reste étant grisé et bloqué.
La fenêtre sera je le pense couper en 3:
- En tete sorte de barre avec icône - titre - et croix pour fermer
- le contenu étant une page php (et pour futur réutilisation html)
- un bas avec un petit close.

Voila pourrais tu me donner les étapes?
De part tes explications je vois comment réaliser cela directement mais cela demanderais plusieur iframe (un pour chaque cellule) sans avoir la possibilité de faire un .js alors que dans le meilleure des cas j'aurais voulu appeler cette fonction ainsi:

           [utilisateurs_ajouter.php
               
           ]

Merci de ta patience!
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
32
@bultez : ok, je me suis trompé comme d'habitude quoi ! Je pensais que l'ajax pouvait faire l'afaire...

@Dure : Comme je pense que bultez est plus apte que moi a répondre a ta demande je lui laisse le topic... bonne chance !

a++

Si la réponse vous convient, pensez : Réponse acceptée !
Messages postés
18
Date d'inscription
dimanche 10 août 2008
Statut
Membre
Dernière intervention
25 janvier 2009

Je pense que les divergences de choix amènent à de bonne chose donc tu peut toujours rester sur ce topic nicomilville. Puis vu mon niveau j'ai toujours beaucoup à apprendre de vous deux ^^
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
32
Ok bon ba je surveille le topic alors...

Moi aussi j'ai beaucoup de chose a apprendre (bultez et d'autres intervenants m'apprennent beaucoup de chose dailleur c'est comme ça que j'ai commencer a maitriser le javascript plus tu lis de message et plus tu apprend de chose et après tu peus aider les autres a ton tour ou essayer, des fois ça marche, des fois ça marche pas)  !

Quand a mon niveau je pense que j'ai le niveau débutant (ou initié mais ça m'étonerai)...

a++

Si la réponse vous convient, pensez : Réponse acceptée !
Messages postés
18
Date d'inscription
dimanche 10 août 2008
Statut
Membre
Dernière intervention
25 janvier 2009

@Nicomilville:
Tu pourrais me linkais ton tuto AJAX? Je vais regarder ça le temps que Bultoz réponde, s'il répond
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
32
Biensure !

Tiens http://www.javascriptfr.com/tutoriaux/COMMUNICATION-AVEC-SERVEUR-MODE-ASYNCHRONE-XMLHTTPREQUEST_781.aspx !

Si la réponse vous convient, pensez : Réponse acceptée !
Messages postés
18
Date d'inscription
dimanche 10 août 2008
Statut
Membre
Dernière intervention
25 janvier 2009

J'ai tenté de commencer avec une iframe de cette manière:

<html>
<head>
...
<style type="text/css">
<!--
#conteneur {
    position:absolute;
    left:50%;
    margin-left:-512px;
    top:10px;
    overflow: auto;
    z-index:1;
}
#utilisateurs {
    position:absolute;
    left:23px;
    top:216px;
    width:427px;
    height:130px;
    overflow: auto;
    z-index:1;
}
#nos_vins {
    position:absolute;
    left:487px;
    top:224px;
    width:483px;
    height:121px;
    overflow: auto;
    z-index:1;
}
#actualites {
    position:absolute;
    left:32px;
    top:428px;
    width:933px;
    height:230px;
    overflow: auto;
    z-index:1;
}
#admin {
    position:absolute;
    left:628px;
    top:30px;
    width:301px;
    height:106px;
    overflow: auto;
    z-index:1;
}
#aff {
    position:absolute;
    top:0;
    left:50%;
    height:100%;
    width:100%;
    display:none;
    background-color:#000000;
    margin-left:-256px;
    z-index:2;
}

<script type="text/javascript">
            function griser(prm)
            {    document.getElementById("aff").style.display=prm;    }
</script>
-->
</style>

</head>



       

...

...

...

....

</html>

j'ai repris le code de bultez mais rien ne se passe lorsque je clique...

merci de m'aider ^^
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
@nico >>@bultez : ok, je me suis trompé
         pas trompé, on pourrait utiliser ajax, mais ici,
              ça va compliquer me semble-t-il sans résoudre le reste.
         >>comme d'habitude quoi
         mais non. et puis ça arrive à tout le monde et moi plus souvent qu'à mon tour.

@Dure >>mais rien ne se passe lorsque je clique...
        et comment tu cliques sur ce que tu nous donnes ?
        déjà, avec FF pas de bouton visible
        et si avec IE on le voit, dès qu'on clique : ça plante
        ( regarde ton </style> mal placé, et qui devrait être avant <script type="text/javascript"> )
        et quand on programme :
FireFox
, regarder la "console d'erreurs"
Outils / Console d'erreurs
et mieux : télécharger mon Site] [M'écrire], <!--
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
32
ok, je suis le sujet pour voir ou sa va nous mener...

Pour l'iframe faudra qu je me renseigne, j'en est entendu parler mais je n'est jamais su ce que c'était !

a++

Si la réponse vous convient, pensez : Réponse acceptée !