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 class="passthrough">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 {
    background-color: magenta;
    width: 100%;
    height:100%;
    opacity: .3;
}
button {
    padding: 0;
    border-width: 2px;
}

JavaScript

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

$('mask').addEvent('click',function(e){
    this.toggleClass('show');
    var under;
    if ( document.elementFromPoint 
         && (!Browser.ie || Browser.ie9) /* eFP buggy in older IE */ ) {
       // console.log('using eFP');        
       under = document.elementFromPoint(e.page.x,e.page.y);
    } else {
        // console.log('using iteration');        
        $$('.passthrough').each(function(itm){
            eventCoords = this;
            elementCoords = itm.getCoordinates();
            if ( (eventCoords.page.x > elementCoords.left) 
                 && (eventCoords.page.x < elementCoords.right)
                 && (eventCoords.page.y > elementCoords.top)
                 && (eventCoords.page.y < elementCoords.bottom)
                ) {
                under = itm;
            }
        },e)
    }

    if ( under && under.hasClass('passthrough') ) {
        under.fireEvent('click');
    }
});

$$('.passthrough').addEvent('click',function(){
    alert('gotit');
});