how to dim your webpage to center your attention on a banner? (dim-bright effects on your webpage)

Question

I was wondering on how this effect is created in certain webpages :

On loading the webpage, a banner ad with a close button is displayed as the topmost layer, and the actual webpage is displayed as the lower layer; the webpage being completely dimmed out, so that the focus of attention naturally falls on the banner ad with close button. And on clicking this close button in the ad, the actual webpage is displayed immediately, but now, back to its original brightness.

Well, that was just an example, I know such practices of displaying ads are irksome.

And my question here is - How do you get that dim-and-bright effect on your webpage?

PS:

1. I know about the z-index in css, so I just need to know the dimming part.
2. I'm looking for a css based solution (or rephrasing that, solution without the use of any scripting like js), if its possible.

Thanks guys.

Answer 1

Something like this? Very minimal scripting.

HTML

<div class="overlay"></div> <div class="overlay-message">     <p>CLICK TO CLOSE</p> </div> 

jQuery

$(document).ready(function() {     $(".overlay, .overlay-message").show();      $(".overlay-message").click(function() {         $(".overlay, .overlay-message").hide();     }); }); 

CSS

.overlay {     position:fixed;     top:0;     bottom:0;     left:0;     right:0;     background-color:#fff;     opacity:0.8;     z-index:1001; } .overlay-message{     position: fixed;     top:30px;     left:30px;     width:400px;     height:250px;     background-color:#fff;     opacity:1;     z-index:1002; } 

.overlay {      position:fixed;      top:0;      bottom:0;      left:0;      right:0;      background-color:#fff;      opacity:0.8;      display:block;      z-index:1001;  }  .overlay-message{      position: fixed;      top:30px;      left:30px;      width:400px;      height:250px;      background-color:#eee;      border:1px solid #000;      opacity:1;      z-index:1002;      box-sizing:border-box;      padding:100px 50px;  }    .overlay-message:hover {       cursor:pointer;   }

<div class="overlay"></div>  <div class="overlay-message">      <p>CLICK TO CLOSE</p>  </div>          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>    <script>  $(document).ready(function() {      $(".overlay, .overlay-message").show();            $(".overlay-message").click(function() {          $(".overlay, .overlay-message").hide();      });  });  </script>

Answer 2

You can do this using the :target selector in CSS and opacity, but both are not available in most browsers.

Instead, you are going to have to use javascript to make the dimed box appear.

Usually you'd use a absolutely positioned 100% width and height box with a background color that's rgba with a transparent png fallback.

Styling it like this will work:

#dim {     position:absolute;     top:0;     left:0;     width:100%;     height:100%;      background: url('semitransparent1x1.png');     background: rgba(0, 0, 0, 0.8);      z-index:100; } 

Then use some simple jQuery to show it and remove it.