Make Overlay Background Click-Through-Able

Make overlay background click-through-able

I've fixed your problem by adding pointer-events: none; to the absolute block.

body {

  margin: 0;

  padding-left: 10px;

  font: 20px Arial, sans-serif;

  line-height: 30px;

}

a:hover {

  color: red;

}

#overlay-blocking,

#overlay-passing{

  position: absolute;

  height: 30px;

  width: 10em;

  left: 0;

}

#overlay-blocking {

  top: 30px;

  background: rgba(0,100,0, .2);    

  pointer-events: none;

}

#overlay-passing {

  top: 0;

  background: rgba(100,0,0, .2);    

}

<a href="#">Link blocked</a><br>

<a href="#" title="hoverable">Link available</a><br>

<a href="#" title="hoverable">Link available</a><br>    

<div id="overlay-blocking"></div>

<div id="overlay-passing"></div>

Click through div to underlying elements

Yes, you CAN do this.

Using pointer-events: none along with CSS conditional statements for IE11 (does not work in IE10 or below), you can get a cross browser compatible solution for this problem.

Using AlphaImageLoader, you can even put transparent .PNG/.GIFs in the overlay div and have clicks flow through to elements underneath.

CSS:

pointer-events: none;
background: url('your_transparent.png');

IE11 conditional:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

Here is a basic example page with all the code.

Click through overlay

You just need to add pointer-events: none; to .overlay

See http://jsfiddle.net/iamnotsam/DV49T/1/ uses SVG for IE9 and IE10 compatibility

For IE 10, there is only partial support for pointer-events: none, specifically the element must be an svg. The above fiddle has been verified on one machine as making IE9 and IE10 happy. Thanks OP for testing.

making a div visible but able to click through

No JavaScript needed. Use the CSS pointer-events: none on the div:

#border-overlay {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  border: solid 8px white;
  pointer-events: none;
}

jsFiddle example

How can I make an overlay window that allows mouse clicks to pass through to windows below it, but still allow some controls to be clicked?

After some more digging around, I found the answer. It's combining what I described in #4 and #5 in the question, but had to do it a different way. I read that WPF controls do not have window handles because wpf controls are not windows like winforms controls are. That's not exactly true. WPF controls do indeed have window handles.

The code

WindowsServices class copied from this answer, with an extra method to remove the transparency:

public static class WindowsServices
{
  const int WS_EX_TRANSPARENT = 0x00000020;
  const int GWL_EXSTYLE = (-20);

  [DllImport("user32.dll")]
  static extern int GetWindowLong(IntPtr hwnd, int index);

  [DllImport("user32.dll")]
  static extern int SetWindowLong(IntPtr hwnd, int index, int newStyle);

  public static void SetWindowExTransparent(IntPtr hwnd)
  {
    var extendedStyle = GetWindowLong(hwnd, GWL_EXSTYLE);
    SetWindowLong(hwnd, GWL_EXSTYLE, extendedStyle | WS_EX_TRANSPARENT);
  }

  public static void SetWindowExNotTransparent(IntPtr hwnd)
  {
    var extendedStyle = GetWindowLong(hwnd, GWL_EXSTYLE);
    SetWindowLong(hwnd, GWL_EXSTYLE, extendedStyle & ~WS_EX_TRANSPARENT);
  }
}

*Note: Transparency in this context refers to the the window being transparent to mouse input, not visually transparent. You can still see anything that is rendered on the window, but mouse clicks will be sent to whatever window is behind it.

Window xaml:

<Window x:Class="TransClickThrough.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="450" Width="800"
        Topmost="True"
        WindowStyle="None"
        AllowsTransparency="True"
        Background="{x:Null}">
    <Grid>
    <Button x:Name="button1" Content="Button" HorizontalAlignment="Left" Margin="183,136,0,0" VerticalAlignment="Top"/>
  </Grid>
</Window>

• Topmost="True" causes this window to always be drawn on top even
  when other windows have focus.
• WindowStyle="None" removes the
  window title bar and borders AllowsTransparency="True" does what
  it's name suggests, it allows the window be to be transparent.
• Background="{x:Null}" makes it transparent. You could also set it
  to a SolidColorBrush that has 0 Opacity. Either way works.

Window code-behind:

protected override void OnSourceInitialized(EventArgs e)
{
  base.OnSourceInitialized(e);

  // Make entire window and everything in it "transparent" to the Mouse
  var windowHwnd = new WindowInteropHelper(this).Handle;
  WindowsServices.SetWindowExTransparent(windowHwnd);

  // Make the button "visible" to the Mouse
  var buttonHwndSource = (HwndSource)HwndSource.FromVisual(btn);
  var buttonHwnd = buttonHwndSource.Handle;
  WindowsServices.SetWindowExNotTransparent(buttonHwnd);
}

Send click to background div

Consider using elementsFromPoint property of document. (For IE/Edge support use msElementsFromPoint).

I've just added a couple of lines to your JS, see the basic snippet below:

function overlayClick(e) {

  alert('overlayClick');

  document.elementsFromPoint(e.pageX, e.pageY)

  .find(el => el.classList.contains('red') && el.click())

}

#wrapper {

  position: absolute;

  left: 10;

  top: 10;

  z-index: 1;

  width: 200px;

  height: 50px;

}

#overlay {

  position: absolute;

  left: 10;

  top: 10;

  z-index: 2;

  opacity: 0.5;

  background-color: magenta;

  width: 200px;

  height: 100px;

  overflow: scroll;

}

.red {

  background-color: red;

  color: yellow;

}

<div id="wrapper">

  <table>

    <tr><td onclick="alert('1')" class="red">111111</td></tr>

    <tr><td>2</td></tr>

    <tr><td onclick="alert('3')" class="red">333333</td></tr>

    <tr><td>4</td></tr>

    <tr><td>5</td></tr>

    <tr><td onclick="alert('6')" class="red">666666</td></tr>

    <tr><td>7</td></tr>

    <tr><td>8</td></tr>

    <tr><td>9</td></tr>

    <tr><td>10</td></tr>

  </table>

  <p>

  The ones, threes and sixes should be clickable, and the magenta div should be scrollable.

  </p>

</div>

<div id="overlay" onclick="overlayClick(event)">

  <div>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis tempus est, sit amet faucibus neque congue eu. Aliquam porta enim tortor, condimentum auctor urna vehicula eu. Suspendisse blandit sapien sapien, eu volutpat odio venenatis eleifend. Donec imperdiet maximus posuere. Mauris rutrum venenatis massa et sodales. Nullam convallis sodales tellus. Ut sodales sem nec lacus viverra, nec vehicula enim dictum. Nam sed molestie massa. Vestibulum eget dui felis. Mauris consequat mauris nec nibh aliquam dapibus. Phasellus id laoreet est. Donec sit amet egestas ex, id malesuada dui. Donec imperdiet, sapien ac dignissim dignissim, lectus dolor convallis sapien, vel elementum arcu leo vel diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  </div>

</div>

---

Related Topics