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

Résolu

Traxmix Messages postés 463 Date d'inscription Statut Membre Dernière intervention -
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.

Afficher la suite

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
Comment faire une capture d'écran sur un samsung sans bouton ? - Guide
Bouton shift pc ✓ - Forum Jeux vidéo
Comment debloquer un bouton enfoncé - Forum Samsung

4 réponses

Réponse 1 / 4

Profil bloqué

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 Statut Membre Dernière intervention 173

Je n'est pas compris ? ^^

Réponse 2 / 4

Profil bloqué

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 Statut Membre Dernière intervention 173

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é

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 Statut Membre Dernière intervention 173

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é

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 Statut Membre Dernière intervention 173

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

Profil bloqué

Tu peux mettre tout ton code html stp ?

Traxmix Messages postés 463 Date d'inscription Statut Membre Dernière intervention 173

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

Bouton ON OFF, O ou I ?

Où est la touche SHIFT sur mon clavier d'ordi ?

Comment enlever le chiffrement de bout en bout sur messenger

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

symbole arrêt marche

Votre réponse

Discussions similaires