Question: I was wondering if there is a way to create a black transparent overlay to basically cover the entire contents of the webpage? 

```
<body>
  <div class="main-container">
    <!--many more divs here to create webpage-->
  </div>
</body>

```

Answer: 
The very basic overlay can be made using position absolute:

```
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .6;
    background-color: #000;
}

```

<http://jsfiddle.net/dfsq/4Mn7Q/>

UPD. As GSP pointed in comment this is not optimal solution when window height is bigger then a viewport. In this case body `{position: relative;}` should be used as well.
This might be what you are looking for: <http://malsup.com/jquery/block/>