Geek Answers Handbook

How do I darken an entire page? (html)

When I use a different div for this, it will not affect other dom classes, so I need to change each dom class when I want the whole page to get darker.

Is there a way to overlap the entire document using a gray transparent plane?

+5
source share
3 answers

There is a codepen reflecting your needs. (create popup and darken the view)

HTML:

<div class="wrapper"> <button class="btn btn-success dim">Dim the page!</button> <div class="dimmer"> <span class="exit">&times;</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(); }); });

Note. The author of this is @srikarg

+4
source

You will need to display the overlay div

 <div id="overlay"></div>

Make a fixed position

 #overlay { background-color: rgba(0,0,0,0.5); position:fixed; left:0; top: 0; width:100%; height:100%; }

and make it visible when you want to darken the page, this is how you do it

 $(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>
+3
source

You can add background-color to your body using css:

 #overlay { background-color: rgba(0,0,0,0.5); /* your color */ width: 100%; height: 100%; position: fixed; top: 0; left: 0; }

Demo: http://jsfiddle.net/6gahqaej/2

+2
source

More articles:


All Articles