Quand on clique sur un bouton un bout de page s'asombri

Résolu/Fermé

Traxmix Messages postés 461 Date d'inscription mardi 12 mars 2013 Statut Membre Dernière intervention 8 janvier 2020 - 13 mai 2013 à 19:19
Profil bloqué - 15 mai 2013 à 20:38

Bonsoir,
Aujourd'hui je code une page de live pour mon forum.
Et j'aimerai que quand les visiteurs sont sur la page de live, un petit bouton s'affiche et toute la page s'assombri sauf une div.

Je sais que c'est possible mais je sais pas comment. Auriez-vous le code ?

Merci.

A voir également:

Quand on clique sur un bouton un bout de page s'asombri
Supprimer une page word - Guide
Page d'accueil iphone - Guide
Traduire une page web - Guide
Word numéro de page 1/2 - Guide
Comment imprimer un tableau excel sur une seule page - Guide

4 réponses

Réponse 1 / 4

Profil bloqué
13 mai 2013 à 19:59

Salut,

Il faut mettre un div height:100%; width:100% opacity:0.7; background-color:black; position:fixed; tu lui mets un id et sur ton truc onclick="getelementbyid('tonid') et zindex (tu l'avances au premier plan) ou display ou visibility

Traxmix Messages postés 461 Date d'inscription mardi 12 mars 2013 Statut Membre Dernière intervention 8 janvier 2020 173
13 mai 2013 à 20:52

Je n'est pas compris ? ^^

Réponse 2 / 4

Profil bloqué
13 mai 2013 à 21:45

Il faut que tu mettes un div avec un id (comme un name) et tu le mets à l'arriere plan. Quand tu cliques sur ta croix ou ce que tu veux, tu le fais passer au premier plan. Tu vois ce que je veux dire ?

Réponse 3 / 4

Traxmix Messages postés 461 Date d'inscription mardi 12 mars 2013 Statut Membre Dernière intervention 8 janvier 2020 173
13 mai 2013 à 21:55

Pas du tout.
Alors voici le code css du bloc que je désire garder en opacity 100%

#contenu {
	background-image:url(images/bg2.png);
	background-color:white;
	position:absolute;
	margin-top:100px;
	margin-left:100px;
	text-align:center;
	height:auto;
	min-height:30px;
	width:auto;
	min-width:50px;
	padding:10px;
	-webkit-box-shadow: 0px 0px 16px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 0px 0px 16px rgba(50, 50, 50, 0.75);
	box-shadow: 0px 0px 16px rgba(50, 50, 50, 0.75);
}

Et là, la page complète

@charset "utf-8";
/* CSS Document by Traxmix */

body {
	background-image:url(images/bg-1.png);
	font-family:Verdana, Geneva, sans-serif;
	margin:0px;
	padding:0px;

}

sep {
	color:red;
}

a {
	color:white;
	text-decoration:none; 
}

a:hover {
	color:gray;
	text-decoration:none;
}

#panel {
	background-image:url(images/panel.png);
	background-repeat:repeat-x;
	font-size:12px;
	color:white;
	height:25px;
	padding:5px;
	text-align:center;
}

#contenu {
	background-image:url(images/bg2.png);
	background-color:white;
	position:absolute;
	margin-top:100px;
	margin-left:100px;
	text-align:center;
	height:auto;
	min-height:30px;
	width:auto;
	min-width:50px;
	padding:10px;
	-webkit-box-shadow: 0px 0px 16px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 0px 0px 16px rgba(50, 50, 50, 0.75);
	box-shadow: 0px 0px 16px rgba(50, 50, 50, 0.75);
}

#copy {
	position: absolute;
	text-align:right;
    bottom: 0;
    width: 100%;
	color:#999;
	font-size:9px;
}

#copy:hover {
	position: absolute;
	text-align:right;
    bottom: 0;
    width: 100%;
	color:#999;
	font-size:12px;
}

Réponse 4 / 4

Profil bloqué
13 mai 2013 à 23:04

tu mets dans ton html

<div id="black"></div> (directement en tout premier)

et dans ton css

#black{
background-color:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
z-index:-20;
}

et sur ton lien, tu mets

<a href="#" onclick="getelementbyid('black').style.zindex='20';">apparaître</a>
<a href="#" onclick="getelementbyid('black').style.zindex='-20';">disparaître</a>

Traxmix Messages postés 461 Date d'inscription mardi 12 mars 2013 Statut Membre Dernière intervention 8 janvier 2020 173
14 mai 2013 à 18:37

Merci, mais ça ne fonctionne pas.
Mon arrière plan est effectivement en sombre, mais sa toujours, même si j'appuie sur les liens.
(Et mon menu lui n'est pas sombre :s )

Profil bloqué
14 mai 2013 à 18:48

Ha oui c'est normal, tu es censé avoir d'autres truc par dessus ^^

Mets ça alors :

#black{
background-color:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
z-index:20;
display:none;
}

et sur ton lien, tu mets

<a href="#" onclick="getelementbyid('black').style.display='block';">apparaître</a>
<a href="#" onclick="getelementbyid('black').style.display='none';">disparaître</a>

Traxmix Messages postés 461 Date d'inscription mardi 12 mars 2013 Statut Membre Dernière intervention 8 janvier 2020 173
14 mai 2013 à 18:53

Voilà,
mais quand je clique sur les liens, toujours rien.

Profil bloqué
14 mai 2013 à 19:07

Tu peux mettre tout ton code html stp ?

Traxmix Messages postés 461 Date d'inscription mardi 12 mars 2013 Statut Membre Dernière intervention 8 janvier 2020 173
14 mai 2013 à 19:09

Oui voici les codes (Les liens sont temporairement mis n'importe où dans la page)

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Live - DevCommunity</title>
</head>

<body>
		<div id="black"></div>
        <a href="#" onclick="getelementbyid('black').style.display='block';">apparaître</a> 
<a href="#" onclick="getelementbyid('black').style.display='none';">disparaître</a>

	<div id="panel">
    	<a href="http://devcommunity.net/community/">Forum</a> <sep>?</sep> 
        <a href="http://devcommunity.net/community/showteam.php">L'équipe</a> <sep>?</sep> 
        <a href="http://devcommunity.net/community/forumdisplay.php?fid=108">Le programme</a> <sep>?</sep> 
        <a href="http://devcommunity.net/community/forumdisplay.php?fid=109">Redifusions</a>      
    	</div>
         <a href="#" onclick="getelementbyid('black').style.display='block';">apparaître</a> 
<a href="#" onclick="getelementbyid('black').style.display='none';">disparaître</a>
	<div id="contenu">
 <object type="application/x-shockwave-flash" height="378" width="620" id="live_embed_player_flash" data="https://www.twitch.tv/widgets/live_embed_player.swf?channel=devcommunityofficiel" bgcolor="#000000"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="https://www.twitch.tv/widgets/live_embed_player.swf" /><param name="flashvars" value="hostname=www.twitch.tv&channel=devcommunityofficiel&auto_play=true&start_volume=25" /></object><iframe frameborder="0" scrolling="no" id="chat_embed" src="https://www.twitch.tv/embed-error.html?errorCode=NoParent&content=www.twitch.tv%2Fembed%2Fdevcommunityofficiel%2Fchat" style="margin-left:10px;" height="400" width="350"></iframe>
		</div>
	<div id="copy">
© 2013 DevCommunity - Designed by Traxmix 
		</div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document by Traxmix */

body {
	background-image:url(images/bg-1.png);
	font-family:Verdana, Geneva, sans-serif;
	margin:0px;
	padding:0px;

}

sep {
	color:red;
}

a {
	color:white;
	text-decoration:none; 
}

a:hover {
	color:gray;
	text-decoration:none;
}

#panel {
	background-image:url(images/panel.png);
	background-repeat:repeat-x;
	font-size:12px;
	color:white;
	height:25px;
	padding:5px;
	text-align:center;
}

#contenu {
	background-image:url(images/bg2.png);
	background-color:white;
	position:absolute;
	margin-top:100px;
	margin-left:100px;
	text-align:center;
	height:auto;
	min-height:30px;
	width:auto;
	min-width:50px;
	padding:10px;
	-webkit-box-shadow: 0px 0px 16px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 0px 0px 16px rgba(50, 50, 50, 0.75);
	box-shadow: 0px 0px 16px rgba(50, 50, 50, 0.75);
}

#copy {
	position: absolute;
	text-align:right;
    bottom: 0;
    width: 100%;
	color:#999;
	font-size:9px;
}

#copy:hover {
	position: absolute;
	text-align:right;
    bottom: 0;
    width: 100%;
	color:#999;
	font-size:12px;
}

#black{ 
background-color:rgba(0,0,0,0.8); 
width:100%; 
height:100%; 
position:fixed; 
z-index:20; 
display:none; 
}

Discussions similaires

[PIX] Commencer chaque poème sur une nouvelle page

Chemin Logo du site de la Cité de l'espace

Bouton ON OFF, O ou I ?

[référencement] Ne pas être référencé

Virus Dr Guard sur mon PC

Discussions similaires

Newsletters