Div sur toute la page + Div qui reste au centre de la page

Bonjour,
j'aimerais créer un système ressemblant à ce qui existe sur deviantart.com:
Certaines fonctions s'affichent en surimpression sur la page. C'est à dire qu'un div gris pas totalement opaque s'aplique sur toute la page, et un second div centré affiche une interface pour l'action.

Voyez la prise d'écran ça sera plus clair:


Et quand on fait défiler la page, la page en arrière plan bouge, mais la page en surimpression ne bouge pas d'un poil.

J'ai fouillé dans le code mais je ne trouve rien du tout.
Quelqu'un pourrait-il me fournir des pistes?

Merci

Salut!

Je ne suis pas certain, mais je ne pense pas que ce genre de chose soit gérable en CSS pour le moment, il doit y avoir un paquet de javascript là-derrière ...

Quelqu'un peut confirmer ?

Hello,

Thomas D. a écrit :
Je ne suis pas certain, mais je ne pense pas que ce genre de chose soit gérable en CSS pour le moment, il doit y avoir un paquet de javascript là-derrière ...

Quelqu'un peut confirmer ?

A mon avis, il y a en effet une partie en JavaScript pour la gestion de l'ouverture de la fenêtre (comme dans le tutoriel Faire apparaître des popups sans nouvelle fenêtre).

Quant à l'affichage, je pense que ce sont quand même pas mal les CSS qui entrent en jeu (gestion de l'opacité, affichage de la pseudo popup par dessus la page, ...). Peut-être que JavaScript est sollicité pour que la popup reste centrée verticalement malgré les lacunes d'implémentation de "position: fixed", mais c'est un sujet que je ne maîtrise pas.

Ha oui, position:fixed !!!

En fait, aparemment (si j'ai bien compris), il faut que je mette mon div transparent (vais utiliser un png pour être valide CSS) à la hauteur exacte de la vage via un javascript, que je centre mon deuxième div dans la page via un javascript en lui donnant l'attribut position:fixed.

De longues heures de codage en perspéctive

Merci !!

TheKind a écrit :
Ha oui, position:fixed !!!

En fait, aparemment (si j'ai bien compris), il faut que je mette mon div transparent (vais utiliser un png pour être valide CSS) à la hauteur exacte de la vage via un javascript, que je centre mon deuxième div dans la page via un javascript en lui donnant l'attribut position:fixed.

De longues heures de codage en perspéctive

Merci !!

Après réflexion, il doit être possible d'afficher le div transparent sur toute la "surface" de la page sans trop de difficultés en CSS, et de placer un div contenant le formulaire en position fixed.

Par contre, il faudra effectivement du javascript pour les faire apparaitre et pour centrer le formulaire (ainsi que pour pallier les défauts d'IE6).

C'est du boulot, en effet Et pour ne pas trop te faciliter la tâche, n'oublie pas de garder le formulaire accessible sans JS !

Hola, mon programme entier est Ajaxé à l'extrème, ce qui le rend très simple et rapide d'utilisation mais pas accessible pour ceux n'ayant pas javascript. Dès l'identification je refuserais l'accès à ceux n'ayant pas javascript activé.
C'est une sorte de zone d'administration, c'est pour un nombre de personnes assez restreint donc c'est totalement pas bô sous MSIE et c'est inutilisable pour les non javascript.

Ptète plus tard quand il évoluera je m'occuperais de tout ça.

TheKind a écrit :
que je centre mon deuxième div dans la page via un javascript en lui donnant l'attribut position:fixed.

Je te conseille plutôt l'utilisation d'une classe, que tu pourras ensuite cibler dans ton code CSS.

TheKind a écrit :
Hola, mon programme entier est Ajaxé à l'extrème, ce qui le rend très simple et rapide d'utilisation mais pas accessible pour ceux n'ayant pas javascript. Dès l'identification je refuserais l'accès à ceux n'ayant pas javascript activé.
C'est une sorte de zone d'administration, c'est pour un nombre de personnes assez restreint donc c'est totalement pas bô sous MSIE et c'est inutilisable pour les non javascript.

Ptète plus tard quand il évoluera je m'occuperais de tout ça.

Pas de stress, hein !

Si c'est pour un intranet ou un backend, ça se défend, d'imposer Javascript

Tout dépend des circonstances

Julien Royer a écrit :
Je te conseille plutôt l'utilisation d'une classe, que tu pourras ensuite cibler dans ton code CSS.

Ben oui je compte utiliser une classe et mettre display none/block va javascript.

Sayé ^^
En fait c'est plutôt simple à faire, et ne nécessite pas de javascript (sauf pour afficher/cacher).
Voici le code:

HTML

<div class="popup_fond"><div class="popup-contenu"></div></div>

CSS:

.popup_fond
{
    top:0;
    left:0;
    width:100%;
    height:100%;
    position: fixed;
    background-image: url(img/background_transparent.png);

}

.popup-contenu
{
	width: 400px;
	height: 300px;
	background-color: #FFFFFF;
	display: block;
	position:absolute;
	top: 50%;
	left: 50%; 
	margin-top: -150px;
	margin-left: -200px;
}

Merci à tous, notamment pour le position: fixed

Bonjour, comme mon pseudo l'indique je suis néophyte dans le conception de site.
J’ai bien lu les descriptions qui doivent me permettre de résoudre mon problème mais impossible de comprendre ce que je dois faire de toute ces lignes de code. D’autre par ces lignes de code peuvent elles reproduire l’effet qui ce produit lorsque l’on clique sur un tee-chirt de la page suivante http://www.rammsteinshop.de/catalog/product_info.php?cPath=23&products_id=317
Si oui pouvez-vous m’expliquer comment faire.
Si non pouvez-vous reproduire cette présentation
Je vous remercie par avance de vos réponses.

Oui en partie CSS peut résoudre ce problème. Mais c'est surtout vers un script Javascript qu'il faudra te tourner pour faire un tel effet.

Bonjour Neophyte,

Il est très fortement conseillé aux néophytes de commencer par les bases avant de s'attaquer aux fioritures. Je sais bien que les fioritures en mettent plein la vue, mais des fioritures mal réalisées sur une base branlante, ça ne vaut pas un bon site basique mais efficace car bien conçu.

Toutefois, l'effet sur le site que tu pointes utilise un script « prêt à l'emploi » nommé Lightbox JS. Ça se trouve par là :
http://www.huddletogether.com/projects/lightbox/

Un grand merci pour vos réponses. Je vais suivre ton conseil Florent V. et me "plonger" dans les bases html et css merci encore.