Composer Overlay Test
HTML
<input type="button" value="asdf"></input>
<div class="page">
<div class="page-overlay"></div>
<div class="container"> <span class="entity"></span>
<div class="container"> <span class="entity">
<input type="radio" name="foo"></input><span>Test</span>
<input type="radio" name="foo"></input><span>Test</span>
</span>
</div>
</div>
<div class="container"> <span class="entity"></span>
</div>
</div>
CSS
.page {
border: 1px solid;
position: relative;
}
.page-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.container {
background-color: #dddddd;
padding-left:5px;
padding-bottom: 5px;
}
.selected {
background-color: red !important;
}
.entity {
display: block;
height: 50px;
margin-bottom: 5px;
background-color: #00ccff;
}
JavaScript
$(".page-overlay").on("click", function (e) {
/*console.log(Object.keys(e));
["pageX", "pageY", "offsetX", "offsetY", "clientX", "clientY", "screenX", "screenY"].forEach(function (atr) {
console.log(atr + " - "+e[atr]);
});*/
this.style.display = 'none';
console.log(document.elementFromPoint(e.pageX, e.pageY));
this.style.display = '';
});