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

Résolu/Fermé

Traxmix Messages postés 463 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
Comment supprimer une page sur word - Guide
Comment imprimer un tableau excel sur une seule page - Guide
Word numéro de page 1/2 - Guide
L'url suivante, censée aboutir à un article, donne lieu à une redirection indiquant que la page n'a pas été trouvée. retrouvez la page recherchée. reportez le titre de l’article et son auteur. - Forum Microsoft Edge / Internet Explorer

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 463 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 463 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 463 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 463 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 463 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

Comment enlever le chiffrement de bout en bout sur messenger

Messenger chiffrement de bout en bout.

symbole arrêt marche

Arrêt/démarrage via Bouton ON/OFF de l'alim

Bouton verrouillage enfoncé