backbone view not hiding events of parent view

Question

My backbone application shows a grid of items, when one of the item been clicked, a "details" backbone view is added to the DOM(just after the grid 'div').

The "details" view hides everything with a "shadow", transforms the parent grid view with css transform, and shows details in divs inside it.

I hide everything with a css class, like that:

.itemDetails {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    padding-top: 140px;
}

I think the result of what I wrote is called "lightbox". It works very nice, but the problem is, that I can still click on some of the grid items behind the shadow(mostly the ones later in the grid). Should I use "this.undelegateEvents();" ? any other thing I haven't thought about ?

Basically, I just want to "freeze"(also so hover effects won't work) the parent view(until clicking "x"- which already works). Thanks

I'm not sure about the terminology, if it's "parent" view. "details" view is just another view, that is been init and added to the DOM, in a callback of "click" event inside the "grid" view. — Daniel
Sounds like you want a UI-blocker that sits under your lightbox but above the rest of the page, that would eat up the events but leave everything else alone. Google for "jquery block ui" and you should see some examples to learn from. — mu is too short
I think you just need to set the z-index so that its higher up then your grid and therefore blocks the elements below. — Jack
It's not z-index. It already looks fine, just not behaving fine... thanks. — Daniel
only the first six grid items events do "stops" as expected, the last ones keep working. strange... — Daniel

Unknown Unknown · Accepted Answer · 2012-12-13T02:06:14

I think what you have in mind is a modal window. links: http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/ and How to make a simple modal window?.

in short a modal window is what you have described but not named - a child window obscuring all parents from view, that must be resolved before the parent can be interacted with again.

I might be mistaken but if I'm right the modal window solution is vastly simpler than some other options.

backbone view not hiding events of parent view

1 Answers