Quando uso un altro div per farlo, non influenzerà altre classi dom, quindi devo modificare ogni classe dom quando voglio che l'intera pagina diventi più scura.Come oscuro l'intera pagina? (html)
C'è un modo per sovrapporre l'intero documento con un piano trasparente grigio?
C'è un codepen ilustrating vostre esigenze. (La creazione di un popup eliminabile e oscuramento della vista)
HTML:
<div class="wrapper">
<button class="btn btn-success dim">Dim the page!</button>
<div class="dimmer">
<span class="exit">×</span>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum vel itaque fuga fugit fugiat enim excepturi nihil aperiam soluta ex nemo quam consectetur blanditiis dolores quisquam temporibus voluptatem veritatis distinctio neque labore ullam dicta delectus aspernatur odio ipsam. Sit est tempora odit neque fuga sapiente velit aliquid dignissimos ratione perspiciatis animi ullam incidunt veritatis quo eligendi esse aperiam qui vitae praesentium nam! Necessitatibus sequi maiores facere non numquam nesciunt veniam dignissimos aperiam consectetur saepe excepturi mollitia id tempora vero labore ducimus impedit iusto perspiciatis aliquam optio distinctio debitis quibusdam nulla dicta repellat praesentium ullam cupiditate totam soluta voluptatibus blanditiis recusandae!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum vel itaque fuga fugit fugiat enim excepturi nihil aperiam soluta ex nemo quam consectetur blanditiis dolores quisquam temporibus voluptatem veritatis distinctio neque labore ullam dicta delectus aspernatur odio ipsam. Sit est tempora odit neque fuga sapiente velit aliquid dignissimos ratione perspiciatis animi ullam incidunt veritatis quo eligendi esse aperiam qui vitae praesentium nam! Necessitatibus sequi maiores facere non numquam nesciunt veniam dignissimos aperiam consectetur saepe excepturi mollitia id tempora vero labore ducimus impedit iusto perspiciatis aliquam optio distinctio debitis quibusdam nulla dicta repellat praesentium ullam cupiditate totam soluta voluptatibus blanditiis recusandae!</p>
</div>
</div>
CSS:
.wrapper {
padding: 2.5em;
margin: 0 auto;
width: 80%;
}
.dimmer {
display: none;
background: #000;
opacity: 0.5;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
.dim {
display: block;
margin: 2em auto;
z-index: 200;
}
.exit {
font-size: 100px;
color: red;
position: absolute;
top: 2px;
left: 2px;
opacity: 1;
cursor: pointer;
}
Javascript:
$(function() {
var dimmerButton = $('.dim');
var dimmer = $('.dimmer');
var exit = $('.exit');
dimmerButton.on('click', function() {
dimmer.show();
});
exit.on('click', function() {
dimmer.hide();
});
});
Nota: L'autore di questo è @srikarg
Grazie! Questo è esattamente ciò di cui ho bisogno :) – Sahkan
Contrassegnalo come una decisione! :) –
È possibile aggiungere un background-color al vostro corpo con i CSS:
#overlay {
background-color: rgba(0,0,0,0.5); /* your color */
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
Grazie, il fatto è che quando oscuro l'intera pagina, ho bisogno di mostrare una finestra popup con opacità normale. la pagina scura è lì per indicare che l'utente dovrebbe concentrarsi solo sulla finestra che è comparsa. – Sahkan
Sarà necessario mostrare un div overlay
<div id="overlay"></div>
renderlo posizione fissa
#overlay {
background-color: rgba(0,0,0,0.5);
position:fixed;
left:0;
top: 0;
width:100%;
height:100%;
}
e renderlo visibile quando si vuole scurire pagina, ecco come si fa
$(function(){
//Am hiding the overlay after 2 sec
$("#overlay").delay(3000).hide(200);
})#overlay {
background-color: rgba(0,0,0,0.5);
position:fixed;
left:0;
top: 0;
width:100%;
height:100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div id="overlay"></div>
<h1>My Awesome Page</h1>
</body>
http://stackoverflow.com/quest ioni/18065927/button-to-darken-the-whole-page – tharif