cssangularz-index

high z-index put element in front of others, but let click on them


In my angular project I added ngx-loading-bar from aitboudad/ngx-loading-bar, (I installed the http-client package), this is my app.component.html:

<div class="main-comp">
    <ngx-loading-bar [color]="'#74ffff'" [includeSpinner]="false" [height]="'3px'" ></ngx-loading-bar>

    <header>
       ...header content...
    </header>
    <main id="main-content">
        <router-outlet></router-outlet>
    </main>
    <footer id="footer-content">
      ...footer content...
    </footer>
</div>

Now I need to add a black full screen element to block the user to press any buttons while the loader appears. I used the following scss code:

::ng-deep{
    .ngx-bar{
        z-index: 100;
        &::after{
            content: "";
            display: block;
            width: 100vw;
            height: 100vh;
            background-color: #00000066;
            position: fixed;
            top: 0;
            left: 0;
        }
    }
}

this indeed shows half opacity black div in front of all elements in the screen, but unfortunately - this doesn't prevent the click on elements! Even when I changed the color to totaly black or any non-transparent color - I still see the cursor changing to pointer and clicking when it's so - cause actions and http requests.

what is the problem? I tried to give high z-index, and change the positions fron fixed to absolute - didn't help. I also suspected that it might be pseudo element issue, so I deleted the ::after and tried to give full size to the loader div itself - same result!

I will be greatfull for any advice!


Solution

  • Making my comment into an answer, I think the problem was the :after selector is not working as you intended. You can learn more about the after selector here

    Basically, to achieve your desired result, you can wrap the ngx-loading-bar component on a div and set the styling with a class. (You can use the has() function for a pure CSS solution. It will style the div only when the loader line appears inside of it)

    CSS

    .loadbar-bg:has(div) {
      display: block;
      width: 100vw;
      height: 100vh;
      background-color: #00000066;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
      pointer-events: none;
    }
    

    HTML

    <div class="main-comp">
        <div class="loadbar-bg" >
            <ngx-loading-bar [color]="'#74ffff'" [includeSpinner]="false" [height]="'3px'" ></ngx-loading-bar>
        </div>
    
        <header>
           ...header content...
        </header>
        <main id="main-content">
            <router-outlet></router-outlet>
        </main>
        <footer id="footer-content">
          ...footer content...
        </footer>
    </div>