11487 sujets

JavaScript, DOM et API Web HTML5

Opacité dès l'ouverture de la page

Bonsoir le Forum,

Voilà je tâtonne pour faire mon site.
Pour commencer en cliquant dans le menu j’appel une page, lorsqu’elle s’ouvre, un faux popup s’ouvre en même temps dans lequel je rentre le contenu de ma page.

Et ma question est que je souhaiterais avoir une opacité sur ma page et non sur mon « faux popup ».

Si quelqu’un peu m’aider
Vous remerciant par avance
Si l'ensemble des contenus de ta page est dans un même élément (un conteneur global) enfant de BODY, et ton contenu en surimpression dans un deuxième élément (lui aussi enfant de BODY), tu peux baisser l'opacité du premier élément et garder le deuxième parfaitement opaque.

Cela dit, on utilise souvent une technique qui consiste à superposer:
- tout le contenu de la page (avec sa mise en page normal);
- un élément qui fait «masque», en position:fixed, avec une image de fond translucide ou une couleur de fond RGBA (image de fond PNG: meilleure compatibilité avec IE7 et IE8);
- dans cet élément de masque ou séparément, un conteneur centré horizontalement et verticalement avec le contenu que tu veux mettre en avant.

Les avantages de la méthode:
- meilleures performances et compatibilité que l'utilisation d'opacity et du filtre DirectX équivalent pour l'opacité;
- l'élément «masque» peut être utilisé comme surface de clic pour, au choix, empêcher les clics sur le contenu situé dessous ou bien permettre la fermeture de la «fausse pop-up» par un clic sur le fond.

Pour voir des implémentations de ce genre de chose, voir du côté des scripts de type «lightbox». Mais rien n'empêche de faire la sienne, surtout si on veut quelque chose de simple et maitrisé.
Modifié par Florent V. (17 Nov 2010 - 19:14)
Merci beaucoup pour ta réponse, mais là je rame dur.

en effet je repart d'une page existante pourla transformer, donc il y en a partout.

peux tu si ce n'est pas trop te demander de me donner un exemple concret

te remerciant par avance
je te remercie je suis allé voir mais je ne trouve pas ce que je cherche exactement

dans un premier temps lorsque tous ce passait sur la même page il n'y avait aucun problème
j'appelai ma div comme ceci :

<p><a href="#" onclick="document.getElementById('filter').style.display='block';
document.getElementById('boxe').style.display='block';">&raquo;&nbsp;Nous Contacter </a> </p>

filter rendant opaque la page et box ma div ( faux popup ).

ce que je souhaiterai faire appeler par exemple c'est d'appeler de la page index via le menu la page contact et que le filtre fonctionne et ouvre la boxe.

ça doit être possible mais n'étant pas très fortiche en la matière je rame
Salut oasisj ,

Je suis pas sur d'avoir saisie, cherches tu a obtenir le genre d'effet que l'on peut voir sur certains sites lorsqu'on clique sur une image (pour l'ouvrir en taille réelle) ?
Le contenu du site s'assombrit, l'image est chargée au premier plan.

Tu peux obtenir cet effet, quelque soit le contenu que tu veux au premier plan (simple image, ou contenu riche à l'intérieur d'une div globale).

Exemple, tu pars de la page suivante :


<body>
      <div id="ContenuGlobal"></div>
</body>


Un clique sur un lien va appeler une fonction JavaScript qui va :

_Créer une nouvelle div,
_Charger (ou créer) le contenu de ta nouvelle div,
_Ajouter cette div au DOM.

Tu te retrouveras avec la même page, mais modifiée (ce qui va poser problème pour le référencement, voir mon poste sur le référencement des pages dynamiques).


<body>
      <div id="ContenuGlobal"></div>
      <div id="ContenuCree"></div>
</body>


Ta div créée peut être de cette forme :


<div id="ContenuCree">
      <div id="MonContenu"></div>
</div>


Grâce aux propriétés de style (CSS), ta div parente ContenuCree aura ton background semi opaque (via un PNG ou une propriété opacity, a toi de voir) et aura la taille de ton site global (ou du navigateur, c'est encore a toi de voir).

Est ce que j'ai bien compris le problème?
oasisj a écrit :
c'est d'appeler de la page index via le menu la page contact et que le filtre fonctionne et ouvre la boxe

Je propose de refaire cette phrase en français. Smiley cligne
Ok en effet pas très clair

Ma première page ( index.html ) du menu ( acceuil …à…. Contact ). J’accède à chaque page exemple en cliquant sur « contact » j’arrive sur la page ( contact.html )

Mon souhait est d’appeler cette page et d’ouvrir directement une div ( box ) sous forme de faux popup et d’avoir l’arrière plan grisé.

Et pour l’instant j’arrive à le faire mais dans une même page et pas entre 2 pages

Exemple :

Pour appeler :
[#blue
<p><a href="#" onclick="document.getElementById('filter').style.display='block';
	  document.getElementById('box').style.display='block';">&raquo;&nbsp;Nous Contacter </a> </p>[/]
]

( faux popup ):
<div id="filter"></div>
<div id="box">
	<div id="boxheader">
    	<span class="Style10">Inscription aux Cours</span>   
		<span id="boxclose" onclick="document.getElementById('box').style.display='none';
   document.getElementById('filter').style.display='none'"> </span>
	</div>
  <div id="boxcontent">
  <tr> ……….
    </tr>
  </table>
</div>
</div>
]

Le css:

#filter
{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index:30;
	opacity:0.5;
	filter: alpha(opacity=50);
}



#box 
{

	position: absolute; visibility:visible
	top: 10%;
	left: 20%;
	width: 60%;
	height: 75%;
	padding: 0;
	margin:0;
	border: 1px solid black;
	background-color: #B1A688;
	z-index:11;
    opacity:0.9;
	filter: alpha(opacity=90);
}

#boxheader
{
	position:absolute;
	top:0%;
	left:0%;
	width:99%;
	height:30px;
	padding:0;
	padding-top:2px;
	padding-left:8px;
	margin:0;
	margin-right:20px;
	border-bottom:3px solid #fff;
	background-color: #918663;
	color:white;
	text-align:left;
}

#boxclose
{
	float:right;
	position:absolute;
	top: 50;
	right: 0;
	background-image:url(images/close.gif);
	background-repeat:no-repeat;
	border:1px solid black;
	width:20px;
	height:25px;
}
#boxeclose
{
	float:right;
	position:absolute;
	top: 50;
	right: 0;
	background-image:url(images/close.gif);
	background-repeat:no-repeat;
	background-color:#CCC;
	border:1px solid black;
	width:20px;
	height:25px;
}
]
Donc à votre avis que puis-je et comment puis-je faire pour que cela fonctionne entre deux page ????
Ben normal :o

Si tu veux appeler une autre page, quel intérêt de griser l'arrière plan, puisque nouvelle page = nouvel arrière plan?

Construit simplement ta page "contacts.html' avec un arrière plan grisé.

A moins (j'avoue que j'ai du mal a te suivre ^^) que tu veuilles avoir un effet "popup" avec une div pour ta page, à l'ouverture.

A ce compte là, la question ne se pose même pas, il te suffit de spécifier une div de la taille du navigateur (je pense que c'est "tout le contenu du navigateur" que tu appelles "arrière plan") en position absolute 0 0, d'opacité inférieur à 1.
Et dans cette div, le contenu de ta "popup".


<body>
      <div id="arriereplan"></div>
      <div id="popup"></div>
</body>


La construction de la page va suivre le cheminement suivant :

_Affichage de ta div d'arrière plan et tout ce que tu veux dedans,
_Affichage de ta div popup, qui va recouvrir tout le navigateur (puisque débutant en 0,0 et de taille "navigateur") et tout ce que tu veux dedans.
En complément de la réponse de The_Moye, disons qu'il y a trois approches possibles:
1. Tu as un contenu déjà présent dans la page HTML, mais initialement masqué (display:none en CSS ou rajouté en JavaScript). Suite à un évènement (clic sur un lien par exemple), tu vas rendre cet élément visible.
2. Tu as un contenu stocké dans une variable JavaScript. Ça peut être une chaine de caractères avec un code HTML complet, ou bien tu peux utiliser JavaScript et les méthodes DOM pour créer un élément, des éléments enfants, etc. Suite à un évènement, tu vas ajouter ce contenu dans le DOM, soit en utilisant Node.appendChild, soit en utilisant Element.innerHTML.
3. Le contenu n'est pas présent au départ dans la page (dans le HTML ou le JavaScript). Tu récupères ce contenu via une requête HTTP faite en JavaScript (technique «Ajax»), ce qui va généralement te retourner une chaine de caractères contenant ton code HTML que tu peux alors insérer dans la page en utilisant Element.innerHTML (ou les méthodes équivalentes de jQuery ou autre librairie JS).

Si c'est un contenu HTML court, je te conseille la deuxième méthode. Si c'est un contenu HTML long ou qui est susceptible de changer (plusieurs contenus à récupérer suivant le lien cliqué, contenu qui change en fonction de paramètres GET...), la troisième méthode est plus adaptée. Dans les deux cas on fera du JavaScript non intrusif pour que ça marche avec JS désactivé (les moteurs de recherche apprécieront). Dans les deux (ou les trois) cas, la question de l'affichage est indépendante... et elle a déjà été traitée dans ce sujet. Smiley cligne
Sujet clos
Aller à