JSFiddle - React, Tailwind, and code Playground

by sanford

HTML

<script src="http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js"></script>
<div id="mask"></div>
<button id="addmask">Add Mask</button>
<button id="underover">Then Click Me</button>

CSS

div#mask {    
    position: fixed;
    top: 0;
    left:0;
    z-index: 1;
    display:none;
}
div#mask.show {
    display:block;
}
div#mask, div#mask.show ~ button#underover:after {
    background-color: magenta;
    width: 100%;
    height:100%;
    opacity: .3;
}
button {
    padding: 0;
    border-width: 2px;
}
button#underover {
    position: relative;
    z-index: 2;
}
div#mask.show ~ button#underover:after {
    position: absolute;
    z-index: 3;
    content: "";
    top: -2px;
    left: -2px;
    padding: 2px;
}    
.webkit div#mask.show ~ button#underover:after {
    /* chrome known bits */
    top: -2px;
    left: -2px;
    padding: 2px;
}
.gecko div#mask.show ~ button#underover:after {
    /* ff known bits */
    top: -3px;
    left: -5px;
    padding: 2px 2px 4px;
}

JavaScript

$('addmask').addEvent('click',function(){
    $('mask').toggleClass('show');
});
$('underover').addEvent('click',function(){
    $('mask').toggleClass('show');
    alert('gotit');
});
$('mask').addEvent('click',function(){
    this.toggleClass('show');
});