javascript - Is it possible to make a see-through window using HTMLJSCSS? - Stack Overflow

admin管理员组

文章数量:1425849

I need to make a see-through window when user click in a given position of the screen, something like this:

It is, I need to highlight an arbitrary area in the screen (with a fixed width and height) in the position where the user clicks.

I have two options:

1. Use a plugin to take screenshots (like these).
2. Create 4 grayed boxes.

I don't like none of these options for different reasons:

1. The use of these plugins exceds my needs and adds an extra page load time and undesired plexity.
2. Manage these boxes may be plex in a future and browser patibility may be an issue.

So, my question is, is there any way to do this in a simple manner using HTML (HTML5 and canvas is ok), CSS and Javascript/Jquery? A specific Jquery plugin will be an option due I could forget the maintenance of this code.

I need to make a see-through window when user click in a given position of the screen, something like this:

It is, I need to highlight an arbitrary area in the screen (with a fixed width and height) in the position where the user clicks.

I have two options:

1. Use a plugin to take screenshots (like these).
2. Create 4 grayed boxes.

I don't like none of these options for different reasons:

1. The use of these plugins exceds my needs and adds an extra page load time and undesired plexity.
2. Manage these boxes may be plex in a future and browser patibility may be an issue.

So, my question is, is there any way to do this in a simple manner using HTML (HTML5 and canvas is ok), CSS and Javascript/Jquery? A specific Jquery plugin will be an option due I could forget the maintenance of this code.

• javascript
• jquery
• css
• html

Share Improve this question Follow asked Sep 28, 2015 at 11:01 IvanIvan 16k1818 gold badges6464 silver badges9999 bronze badges 3

• have you considered SVG as well? – Jaromanda X Commented Sep 28, 2015 at 11:04
• No, but it could be an option, yes – Ivan Commented Sep 28, 2015 at 11:12
• 1 I came up with this codepen.io/anon/pen/WQoVoq?editors=110, but @Saar's solution is more straight-forward. – Salman Arshad Commented Sep 29, 2015 at 9:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

I did this once, I am not sure everyone will agree with my implementation but it worked for me at the time:

Create a div in the location you want, set height and width (for window effect); position the div in the place you wish and then just add outline to it.

body {
  background-image: url(http://lorempixel./800/800/nature/5/);
  background-size: cover;
}
.windowDiv {
  position: absolute;
  top: 100px;
  left: 100px;
  height: 300px;
  width: 300px;
  outline: 4000px solid rgba(0, 0, 0, 0.5);
}

<div class="windowDiv"></div>

EDIT: use background-color rather than opacity.

2nd EDIT: as A.Wolf suggested you should use outline instead of border for easier positioning.

本文标签： javascriptIs it possible to make a seethrough window using HTMLJSCSSStack Overflow