Affichage d'une page en transparence par rapport à la précédente

laplanche80 Messages postés 102 Date d'inscription   Statut Membre Dernière intervention   -  
laplanche80 Messages postés 102 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je suis en train de créer de toute pièce un site internet (je maîtrise HTML CSS et PHP, je pense que ce sujet répond à du javascript que je ne maîtrise pas) et je souhaite afficher des images ou de courtes informations sur une page de 500px x 500px qui se place au milieu du navigateur (horizontal et vertical) et donc que ces contours soient légèrement transparents pour qu'on puisse voir la page que l'on vient de cliquer derrière et quand on ferme ce "pop up" on revient sur la page initial présentant le lien pour rouvrir le "pop up"

En espérant être le plus clair possible

Merci d'avance
A voir également:

5 réponses

meuhlol Messages postés 1896 Date d'inscription   Statut Membre Dernière intervention   673
 
Salut,

Bien tu peux utiliser un div pour afficher ton contenu.

Par exemple :

<div id="MonDiv" width 500px height 500px>
<!-- ICI LE CONTENU DE TON DIV -->
<!-- ET UN LIEN POUR FERMER CE DIV -->
<p><a href="#" onclick="hidediv('MonDiv')">FERMER</a></p>
</div>

Juste à côté mettre du JavaScript :

<script>
function showdiv()
{
document.getElementById('MonDiv').style.display = 'block';
}
</script>

<script>
function hidediv()
{
document.getElementById('MonDiv').style.display = 'none';
}
</script>

Et pour appeler ton div, tu fais :

<a href="#" onclick="showdiv('MonDiv')">Afficher mon div!</a>
0
laplanche80 Messages postés 102 Date d'inscription   Statut Membre Dernière intervention   3
 
Merci pour ta réponse mais cela reste dans la même page...
Quand on recherche une image dans Google et que l'on clique sur une miniature on voit l'image dans une petite page placée au centre et la page de référence placée derrière en transparence. C'est cette effet là que je souhaite mettre en place mais sa trafiquer avec des iframe comme le fait google
0
tryan44 Messages postés 1288 Date d'inscription   Statut Membre Dernière intervention   220
 
Faites une recherche sur le terme Lightbox.
0
meuhlol Messages postés 1896 Date d'inscription   Statut Membre Dernière intervention   673
 
Le code que je t'ai donné en exemple, tu peux voir son fonctionnement sur ce site https://www.diamant-tzigane.com/ en cliquant tout en bas sur "A Propos..."

D'ailleurs, le lightbox dont parle tryan44 est utilisé sur ce site dans la gallérie. Le lightbox utilisé est téléchargeable sur https://lokeshdhakar.com/

(____(_bdKey____________()~
Pensez à voter pour des réponses.
Pensez à cliquer sur "Résolu" si votre problème est réglé.
0

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

Posez votre question
laplanche80 Messages postés 102 Date d'inscription   Statut Membre Dernière intervention   3
 
Merci à vous deux, je vais regarder tout cela...
0