Ouverture d'un cadre dans la même fenêtre

Résolu/Fermé
Utilisateur anonyme - 26 déc. 2008 à 13:13
 Utilisateur anonyme - 27 déc. 2008 à 20:49
Bonjour,
Sur mon site, je voudrais qu'un cadre contenant du texte (ou des images) s'ouvre dans la même page lorsque l'on clique sur une photo par exemple. Je ne veux pas d'une nouvelle fenêtre !

Voici un exemple : https://www.apple.com/befr/mac/
En bas à droite y'a une image d'une maison avec un "+" dans le coin supérieur gauche de celle-ci. Quand on clique dessus, pas de nouvelle fenêtre mais un cadre qui apparait sur la même page.


MERCI
A voir également:

21 réponses

Lefouerrant Messages postés 567 Date d'inscription mercredi 19 décembre 2007 Statut Membre Dernière intervention 1 octobre 2009 116
26 déc. 2008 à 13:25
je vais travailler dessus. des que j'ai trouve qqc je met un post
0
Utilisateur anonyme
26 déc. 2008 à 13:26
Très gentil =) Merci
0
Lefouerrant Messages postés 567 Date d'inscription mercredi 19 décembre 2007 Statut Membre Dernière intervention 1 octobre 2009 116
26 déc. 2008 à 14:14
salut j'ai un petit pb pour ton script.
tu t'y connais en javascript ?
0
Lefouerrant Messages postés 567 Date d'inscription mercredi 19 décembre 2007 Statut Membre Dernière intervention 1 octobre 2009 116
26 déc. 2008 à 14:21
voici deja un premier code :

<html><head>
<title>Titre2</title>
<style>
div#original { /*Le style de ton "cadre" d'origine*/
border: 1px rgb(0,0,0) solid;} /*Facultatif*/
div#cadre { /*Le style du cadre qui va apparaitre*/
width: 500px; /*La largeur de ce cadre*/
height: 500px; /*La hauteur*/
top: 20px; /*Decalement du cadre a partir du haut*/
left: 20px; /*Decalement du cadre a partir de la gauche*/
display: none;
position: absolute;
border: 1px rgb(0,0,0) solid;
background-color: rgb(255,255,255);}
</style>
</head><body>
<div id="original" onclick="cadre.style.display='block'">Ton texte d'origine ou une photo ici</div>
<div id="cadre" onclick="this.style.display='none'">Ton autre texte qui apparait dans le cadre</div>
</body></html>

pour faire apparaitre la cadre il faut cliquer sur le premier puis pour fermer le cadre il faut aussi cliquer dessus

seulement il faut le modifier a ta guise pour les dimensions par exemple.

mais si tu veux positionner le cadre au milieu de la page y ma faut un truc et c'est pour ca que je t'ai demandé si tu t'y connaissait en javascript
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Utilisateur anonyme
26 déc. 2008 à 14:29
Non, je ne m'y connait pas en JS...
0
Lefouerrant Messages postés 567 Date d'inscription mercredi 19 décembre 2007 Statut Membre Dernière intervention 1 octobre 2009 116
26 déc. 2008 à 14:32
bon... ben essaye le code que je t'ai donne et vois si ca te suffit sinon je suis la
0
Utilisateur anonyme
26 déc. 2008 à 14:36
Tout fonctionne correctement ! =D Super sympa.
Mais je préférerai que le cadre soit centré... Si tu me donne un code JS et que tu me dis où l'insérer, y'a moyen j'ai déjà utilisé des codes JS à éditer.
0
Lefouerrant Messages postés 567 Date d'inscription mercredi 19 décembre 2007 Statut Membre Dernière intervention 1 octobre 2009 116
26 déc. 2008 à 14:38
ben mon pb c'est que je voudrais mettre dans des variables la hauteur et la largeur de la page MAIS PAS DE L'ECRAN TOUT ENTIER c'est ce qui me bloque...

si tu connais la solution je sai comment faire
0
Utilisateur anonyme
26 déc. 2008 à 14:45
Pour la largeur de la page, j'utilise margin et la hauteur, height.
0
Lefouerrant Messages postés 567 Date d'inscription mercredi 19 décembre 2007 Statut Membre Dernière intervention 1 octobre 2009 116
26 déc. 2008 à 14:49
tu peux me dire comment on les utilises ? elles ne sont pas dans mon livre
0
Utilisateur anonyme
26 déc. 2008 à 14:53
En CSS ?

.nom_balise {
margin: 900px; /* largeur de la page */
height: 1200px; /*hauteur de la page */
}
0
Lefouerrant Messages postés 567 Date d'inscription mercredi 19 décembre 2007 Statut Membre Dernière intervention 1 octobre 2009 116
26 déc. 2008 à 14:57
pas en css mais en javascript
0
Utilisateur anonyme
26 déc. 2008 à 15:01
Ah =| En JavaScript je sais pas ...
0
Lefouerrant Messages postés 567 Date d'inscription mercredi 19 décembre 2007 Statut Membre Dernière intervention 1 octobre 2009 116
26 déc. 2008 à 15:03
glups
0
Utilisateur anonyme
26 déc. 2008 à 15:13
Et tu sais centrer horizontalement et verticalement par rapport à l'écran ?
0
Lefouerrant Messages postés 567 Date d'inscription mercredi 19 décembre 2007 Statut Membre Dernière intervention 1 octobre 2009 116
26 déc. 2008 à 18:42
par rapport a l'ecran non justement
0
Lefouerrant Messages postés 567 Date d'inscription mercredi 19 décembre 2007 Statut Membre Dernière intervention 1 octobre 2009 116
26 déc. 2008 à 18:59
ça y est j'ai trouve...
mais (et oui il y a un mais) ca ne fonctionne pas sous IE !!! (enfin pas sur la version 6)

voila :

<html><head>
<title>Titre</title>
<style>
div#original { /*Le style de ton "cadre" d'origine*/
border: 1px rgb(0,0,0) solid;}
div#cadre {
display: none;
position: absolute;
border: 1px rgb(0,0,0) solid;
background-color: rgb(255,255,255);}
</style>
</head><body id="body">
<div id="original" onclick="cadre.style.display='block'">Ton texte d'origine ou une photo ici</div>
<div id="cadre">Ton autre texte qui apparait dans le cadre</div>
<script>
var bordure=50; //la taille de la bordure
document.getElementById('cadre').style.top=bordure;
document.getElementById('cadre').style.left=bordure;
document.getElementById('cadre').style.right=bordure;
document.getElementById('cadre').style.bottom=bordure;
</script>
</body></html>
0
Utilisateur anonyme
26 déc. 2008 à 19:50
Tout fonctionne ! Un grand merci pour tout ça ;-)
Pour IE 6, je trouverai un arrangement...
0
Utilisateur anonyme
27 déc. 2008 à 13:25
Changement de dernière minute... Tu connais pas un code pour que mon cadre s'ouvre et soit centré non pas par rapport à la page mais par rapport à l'écran ?
0
Lefouerrant Messages postés 567 Date d'inscription mercredi 19 décembre 2007 Statut Membre Dernière intervention 1 octobre 2009 116
27 déc. 2008 à 17:49
ca oui mais il disparait dans les limites de la page

mais je peux te le faire seulement y faudrait que la bordure fasse au minimum 200 ou 300 px
0