Menu
I am using Angular flex layout and mostly custom CSS for the layout and I'm trying to find a way to create an overlay effect that covers the entire page except one element. My initial thought was to use the CDK overlay library to create the effect. But this requires you to include a ng-template on the page, in which the content you want to render sits.
What I am wanting to do is simply to show the overlay over the top of everything except a specified element not just what's in the ng-template. I realize this may not be possible, so my second thought is maybe somehow you could create a "virtual" element that is in the same position as the one you want to overlay, but it would appear as though the overlay is just covering everything but the specified element.
This is kinda where I am at right now, I've got the overlay functioning, I just don't understand what needs to happen to make it do this. In this example, perhaps just have it overlay everything but the button you click to toggle it?
https://stackblitz.com/edit/angular-ivy-aftubj
784
I would try something like this: wrap your target element with a div. The wrapper will have the same CSS display type as your element (block, inline-block, ...) and position: relative. When you show the overlay, set the width and height of the wrapper to it's current size (to keep the layout unchanged) and your target element to be position: absolute; z-index: higher-than-overlay. Revert the changes when hiding the overlay. If your target element has a fixed dimensions, you can avoid setting these values dynamically.
window.addEventListener('load', () => {
document.getElementById('hide-button').addEventListener('click', () => {
document.getElementById('overlay').style['display'] = 'none';
});
});#overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: gray;
opacity: 0.5;
z-index: 1;
}
.wrapper {
border: 1px solid green;
position: relative;
margin: 4rem;
}
.target-element {
background-color: white;
position: absolute;
z-index: 2;
}
.wrapper, .target-element {
width: 15em;
height: 1.5em;
}<!DOCTYPE html>
<html>
<body>
<h1>Overlay playground</h1>
<div class="wrapper">
<div class="target-element">
This should stay above the overlay.
</div>
</div>
<div id="overlay">
<button id="hide-button" style="margin: 2rem 0 0 20rem">Hide overlay</button>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
