Add overlay on click, for existing elements

Question

• I have an ultra-basic layout based on Ratchet

   <div id="view1"> <header class="bar bar-nav" id="header1"> <h1 class="title">My Application</h1> </header> <div class="content" id="content1"> <nav class="bar bar-tab" id="nav1"> <a class="tab-item active" href="#" id="navitem1"> <span class="icon icon-home"></span> <span class="tab-label">Home</span> </a> <a class="tab-item " href="#" id="navitem2"> <span class="icon icon-info"></span> <span class="tab-label">About</span> </a> </nav> </div> </div> 

• When the user clicks on an element (fulfilling some criteria, eg has an ID set), an overlay is to be added covering just this one element (not a full page one and without messing the layout at all )

• If nested element receives the click event, the back-most element is to be picked first and if user clicks again, pick the next child fulfilling the criteria. (Meaning: if the user clicks in the bottom part of the page, the view1 is picked up first. If he clicks again, it'll be content1 , then nav1 , and so on...)

This is mostly an experiment but I still cannot figure it out.

I've tried different solutions (or plugins, eg ContentHover ) but none has worked.

Any ideas?

---

UPDATE

The shortest way I could describe the issue is : I want to replicate the way the Inspector (Chrome/Safari) highlights the different elements.

---

Fiddle: http://jsfiddle.net/pta2mbcv/

Answer 1

jQuery's event.target should do it for you. View documentation here.

It's not a definite answer, but I've coded something up for you, we can iterate on it. This overlay only appears when the element clicked has an ID.

JSFidlle

Overlay jQuery

$(document).on('click', function (event) {

  var target = $(event.target);

  if( target.attr('id') ) {
      target.addClass('overlay');
  }

});

Overlay CSS

.overlay:before {
    position: absolute;
    content:'';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(5, 11, 37, 0.5);
}