make selectable area using javascript

Posted by Mher on Stack Overflow See other posts from Stack Overflow or by Mher
Published on 2014-05-30T02:59:18Z Indexed on 2014/05/30 3:26 UTC
Read the original article Hit count: 97

Filed under:
|
|

lets say I have a html page.

<html>
<body>

...
This is my HTML Page, full of html objects and mouse events on them
...

<div id='blocker' style="height: 100%; position: absolute; width: 100%; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1001; background: none repeat scroll 0% 0% black; opacity: 0.5;"></div>
<div id='window_to_my_html_page' style="display: block; left: 50px; top: 50px; width: 200px; height: 200px; z-index: 1002; position: absolute;"></div>


</body>
</html>

In this example div which id is 'blocker' will block all mouse events from my page.
All my HTML page elements behind of my second div(which id is 'window_to_my_html_page') must be active, all mouse events must work on them, this div must be like a window to my HTML page

I want to make all elements from my HTML page active(to work as normal) inside this area (left: 50px; top: 50px; width: 200px; height: 200px).... and other content, outside of this area make inactive

The question: how can I do it?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery