css3 overlay

by ZachWills

HTML

<div id="overlay-container">
    <div class="overlay-inner">Here is my important content! <a href="#" class="close">X</a> 
    </div>
</div>
<a href="#">Click me to see a simple overlay!</a>

CSS

* {
    box-sizing:border-box;
    margin:0;
    padding:0;
}
#overlay-container {
    transition:all 0.25s ease-in-out;
    opacity:0;
    height:100%;
    width:100%;
    position:fixed;
    z-index:-99;
    background: url(data:image/svg+xml;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMyZDJkMmQiIHN0b3Atb3BhY2l0eT0iMC43OCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMGUwZTBlIiBzdG9wLW9wYWNpdHk9IjAuOSIvPgogIDwvcmFkaWFsR3JhZGllbnQ+CiAgPHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-radial-gradient(center, ellipse cover, rgba(45, 45, 45, 0.78) 0%, rgba(14, 14, 14, 0.9) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(45, 45, 45, 0.78)), color-stop(100%, rgba(14, 14, 14, 0.9)));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(45, 45, 45, 0.78) 0%, rgba(14, 14, 14, 0.9) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(45, 45, 45, 0.78) 0%, rgba(14, 14, 14, 0.9) 100%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(45, 45, 45, 0.78) 0%, rgba(14, 14, 14, 0.9) 100%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(45, 45, 45, 0.78) 0%, rgba(14, 14, 14, 0.9) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c72d2d2d', endColorstr='#e60e0e0e', GradientType=1);
    /* IE6-8 fallback on horizontal gradient */
}
#overlay-container.on {
    opacity:1;
    position:fixed;
   ...

JavaScript

$("a").click(function () {
    $("#overlay-container").addClass("on");
});

$(".on").click(function () {
    $(this).removeClass("on");
});

$(".close").click(function () {
    $(".on").removeClass("on");
});