Blur overlay on top of div

by William Green

HTML

<div id="projectContainer">
    <div id="blurContentContainer">
        <div id="content">This content will be blurred when the button is clicked... go ahead... click it! It's ok :)<br><input type="button" onclick="document.getElementById('blurOverlay').className = 'displayed'; document.getElementById('blurOverlay').style.height = this.parentNode.scrollHeight+'px'; document.getElementById('blurOverlay').style.bottom = this.parentNode.scrollHeight+'px'; this.parentNode.className = 'blurred';" value="find out what happens.."></div>
        <div id="blurOverlay">Processing...</div>
    </div>
</div>

CSS

#projectContainer {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#eee;
}

#content {
    display:table;
    width:40%;
    margin:auto;
    height:auto;
    background-color:#56A3CF;
    padding:5px;
    border-radius:6px;
    color:#fff;
}

#blurOverlay {
    display:none;
    background-color:transparent;
    width:40%;
    margin:auto;
    padding:5px;
    border-radius:6px;
    position:relative;
    z-index:10000;
}
.blurred {
    -o-filter:blur(1.5px);
    -webkit-filter:blur(1.5px);
    -moz-filter:blur(1.5px);
    -ms-filter:blur(1.5px);
    filter:blur(1.5px);
}
.displayed {
    display:block !important;
}