POC : using outline on modal instead of separate overlay div

by jorgeluis

HTML

<h1>Page header</h1>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
<div class='modal'>
    This would be what a modal box looks like using an outline instead of an overlay div underneath. Thanks to Lea Verou for the idea.
</div>

CSS

body {
    background: #39c;
    color:#fff;
}
.modal {
    position:absolute;
    top:50%;
    left:50%;
    width: 150px;
    margin: -75px 0 0 -75px;
    background: #fff;
    color: #333;    
    padding: 2em;
    border: solid 3px rgba(0,0,0,.6);
    outline: 9999px solid rgba(0,0,0,.3);
}