Page Overlay

My own page overlay.

by Joshua Powell

HTML

<div class="overlay">
    <div class="video">
        <iframe class="aV" width="560" height="315" src="//www.youtube.com/embed/9uyeSBKEKOQ" frameborder="0" allowfullscreen></iframe>
        <a href="#" class="findAgnt">Find<br />an<br />Agent</a>
    </div>
</div>
<div class="content">
    <h1>I am so awesome it sometimes hurts!</h1>
    <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philospher Cicero. It's words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found in the original.</p>
    <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philospher Cicero. It's words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually has no meaning whatsoever. As Cicero's text...

CSS

.content {
    width: 60%;
    background: brown;
    position: relative;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
}

.overlay {
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    position: absolute;
    display: none;
    z-index: 1000;
}

.video {
    position: relative;
    width: 560px;
    height: 315px;
    margin: 0 auto;
    top: 50px;
}

.aV {
    position: absolute;
    top: 50px;
}

.findAgnt {
    position: absolute;
    top: 50px;
    display: block;
    background: #0c5b78;
    width: 45px;
    height: 80px;
    right: 0px;
    padding-left: 5px;
    cursor: pointer;
    text-align: left;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
    text-decoration: none;
    border-top: 5px solid rgba(0, 0, 0, 0.6);
}

.findAgnt:before,
.findAgnt:after {
  content: "";
  position: absolute;
  bottom: -15px;
  border: solid #0c5b78;
}

.findAgnt:before {
  left: 0;
  border-width: 15px 25px 0 0;
  border-right-color: transparent;
}

.findAgnt:after {
  right: 0;
  border-width: 15px 0 0 25px;
  border-left-color: transparent;
}

.btn {
    position: relative;
    width: 30%;
    margin: 0 auto;
    background: #fff;
    color: #2b2b2b;
    text-align: center;
    text-shadow: none;
    padding: 10px 0;
    border-radius: 5px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.btn:hover {
    background: #2b2b2b;
    color: brown;
}

JavaScript

function overlay() {
    var wH = $('body').height();
    var over = $('.overlay');
    
    over.css({height: wH});
    
    $('.btn').on('click', function(e) {
        over.fadeIn();
        e.stopPropagation();
        
        $(document).click(function(e) {
            over.fadeOut();
        })
    });
}

overlay();