Ouverture d'un cadre dans la même fenêtre
Résolu
Utilisateur anonyme
-
Utilisateur anonyme -
Utilisateur anonyme -
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
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:
- Ouverture d'un cadre dans la même fenêtre
- Comment faire un cadre sur word - Guide
- Fenetre windows - Guide
- Fenêtre hors écran windows 11 - Guide
- Page d'ouverture google - Guide
- Mcafee fenetre intempestive - Accueil - Piratage
21 réponses
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
<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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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.
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.
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
si tu connais la solution je sai comment faire
En CSS ?
.nom_balise {
margin: 900px; /* largeur de la page */
height: 1200px; /*hauteur de la page */
}
.nom_balise {
margin: 900px; /* largeur de la page */
height: 1200px; /*hauteur de la page */
}
ç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>
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>