Comment créer un popup en css à l'ouverture d'une page html ?

Salut

je cherche un tuto ou une solution pour afficher un popup tout en css lors de l'ouverture d'une page html..

Si ceci n'est pas possible je me rabatrais sur une solution en JS mais qui passe outre le blocage des navigateur ou autres plugins.

Merci d'avance

tape "jquery modal" dans google, il y a des tonnes d'exemples

Tu peux toujours afficher un bloc (élément DIV ou autre) par dessus les autres contenus de la page, en positionnant ce bloc en absolu ou en fixe. Et lui donner la mise en forme que tu souhaites avec les propriétés CSS habituelles (border, padding, background, etc.).

Par contre, CSS n'est pas destiné à gérer des interactions, comme le fait de masquer un élément (ou le retirer du DOM). Donc si cet affichage de «fausse pop-up» est appelé à être modifié suite à une action de l'utilisateur, il faudra voir du côté de JavaScript.
Et, bien sûr, prévoir un fonctionnement correct sans JavaScript.

Merci pixelb pour l'info sur jquery modal, mais je trouve pas ce que je cherche (a savoir une popup à l'ouverture).

fvsch, merci aussi, mais la encore je ne vois pas comment appeler la div à l'ouverture ?

A la limite si une solution même en javascript existe je suis preneur (a condition qu'elle passe outre le blocage des navigateurs ou plugins)

Derby a écrit :
je ne vois pas comment appeler la div à l'ouverture ?

Ça veut dire quoi, «appeler à l'ouverture»?

- Tu veux que ce message ou contenu soit présent dès l'ouverture de la page? Il suffit alors qu'il soit présent dans le code HTML; pas de rite vaudou nécessaire.
- Tu veux un effet d'animation avec un affichage au bout de N secondes, ou dès l'ouverture de la page mais avec un effet d'animation du type déplacement, fade in ou autre? Tu peux éventuellement faire ça en CSS3 avec les animations (WebKit uniquement à l'heure actuelle je crois), ou utiliser JavaScript + des transitions CSS, ou JavaScript tout court (avec manipulation des propriétés CSS via le CSSOM).

Derby a écrit :
A la limite si une solution même en javascript existe je suis preneur (a condition qu'elle passe outre le blocage des navigateurs ou plugins)

Savoir si tu as besoin de JavaScript ou pas, et dans quelle mesure, ça dépend de ce que tu veux faire précisément. (À priori tu auras besoin d'un minimum de JavaScript, la mise en page de ta pop-in restant bien sûr en CSS.)
Quoi qu'il en soit, les navigateurs ne bloquent pas les pop-ins, car ce sont des contenus à part entière des pages web (pas de nouvelles fenêtres).

je cherche juste a afficher un petit texte et une image à l'ouverture de la page, à la limite avec un petit fade in mais pas obligatoire. Le seul point important c'est qu'il ne soit pas bloqué. Donc un pop in me semble bien , sauf que je ne sais pas du tout ce que c'est.

Tu l'aura compris, vu mon niveau il me faut un tutoi ou mieux encore le code.

<div id="info">
  <h1>Hop, une information</h1>
  <p>Bonjour, j'affiche une information.</p>
</div>

Voilà pour le code, c'est aussi simple que ça. Tu veux afficher un contenu, tu définis ce contenu dans le code HTML.

Tu veux afficher ce contenu en surimpression des autres contenus de la page? Auquel cas je te laisse te renseigner sur le positionnement absolu.

Derby a écrit :
Tu l'aura compris, vu mon niveau il me faut un tutoi ou mieux encore le code.

Pas de tutoriel spécifiquement là-dessus à ma connaissance. C'est un peu de positionnement et mise en forme CSS, donc il suffit de lire des tutoriels (ou livres...) sur ces concepts de base.
Quant au code tout prêt, ce n'est malheureusement pas le genre de la maison.
Modifié par fvsch (31 May 2011 - 22:40)

merci
l'html et le css je me débrouille à peu près (notamment grâce à ton site)
par contre niveau js, je n'y connais rien et je vois pas comment faire pour appeler la div à l'ouverture de la page

Derby a écrit :
par contre niveau js, je n'y connais rien

Deux solutions:
- apprendre JavaScript;
- ou faire appel à un intégrateur web qui maitrise déjà ce langage.

Bonjour,

Derby a écrit :
... je vois pas comment faire pour appeler la div à l'ouverture de la page

En fait, si tu optes pour un élément de type "bloc" (p, div), tu ne dois pas l'appeler à l'ouverture de la page, tu le mets simplement en display:block; dans le css en faisant comme fvsch te l'expliquait. Il sera apparent en même temps que les autres éléments de la page.
Par contre, tu dois prévoir un moyen de le faire disparaître. Par un display:none; par exemple. Pour cela, tu auras besoin d'un peu de javascript, c'est tout. La plupart des internautes à l'heure actuelle ne désactivent plus javascript.
Comment faire? Prévoir un lien ou un bouton dans ta pop-in qui la fera disparaître sur un événement "onclick" :
par exemple :

<a href="javascript:;" title="Fermer" onclick="document.getElementById('-id_de_ton_bloc-').style.display='none';">Fermer</a>

Tu peux aussi utiliser une image, un bouton ... et ajouter du style!

bonjour,

en méthode bricole tu pourrais te servir du pseudo :target et appeler la page de cette façon : mapage.html#popup avec une base html d ce type:

<p id="popup">popup qui s'affiche quand tu la lie <a href="#"> fermer</a></p>

et le css:

#popup {display:none;}
#popup:target {display:block;}

Coté js, il est peut-etre plus confortable d'appliqué une class. Cela pemet de l'avoir dans la feuille de style et d'avoir des styles plus complexes (couleur , bordure , positio, transition, etc ...).

ce qui peut t''être utile en js de base (dans un onclick) :
- this
- className
- parentNode
- style (voir le post precedent)

base html:

<div id="popup">
<span onclick= /*  ajout d'une class au parent par exemple */"> X Fermer</span>
<p> contenu </p>
</div>

Je ne te donne pas d'exemple fonctionnel car ce serait te donner la solution , mais il ne devrait pas etre trop difficile pour toi de maitriser this et style ou className.

Bonne journée