[英]Add overlay on click, for existing elements
I have an ultra-basic layout based on Ratchet 我有一个基于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 ) 当用户点击的元件上(满足某些标准,例如有一个ID
组),覆盖要添加覆盖仅这一个元件 (不是一个完整的页面之一,而根本不搞乱布局)
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. 如果嵌套元素收到click事件,则将首先选择最后一个元素,如果用户再次单击,则选择满足条件的下一个子元素。 (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...) (意思是:如果在页面的底部,用户点击,在view1
,拾取首先如果他再次点击,这将是content1
,然后nav1
,等...)
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. 我尝试了不同的解决方案(或插件,例如ContentHover ),但没有一个起作用。
Any ideas? 有任何想法吗?
UPDATE UPDATE
The shortest way I could describe the issue is : I want to replicate the way the Inspector (Chrome/Safari) highlights the different elements. 我可以描述问题的最短方法是:我想复制检查器(Chrome / Safari)突出显示不同元素的方式。
Fiddle: http://jsfiddle.net/pta2mbcv/ 小提琴: http : //jsfiddle.net/pta2mbcv/
jQuery's event.target
should do it for you. jQuery的event.target
应该为您完成。 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. 仅当单击的元素具有ID时,此覆盖才会显示。
Overlay jQuery 覆盖jQuery
$(document).on('click', function (event) {
var target = $(event.target);
if( target.attr('id') ) {
target.addClass('overlay');
}
});
Overlay CSS 叠加CSS
.overlay:before {
position: absolute;
content:'';
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: rgba(5, 11, 37, 0.5);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.