Home/ Questions/Q 8382893
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T17:02:04+00:00

So, with that said, essentially, the case that always comes up. -modal and overlay

  • 0

So, with that said, essentially, the case that always comes up.

-modal and overlay appears,

-user scrolls down

-user can click stuff under the overlay

How do i fix that? Right now, the main issue is with the overlay.

Its CSS is as follows:

 .overlay
    {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        display: none;
        z-index: 7000;
    }

Since i am using it in a asp page, the depth of the html is like as follows:

<html>
  <body>
    <form>
      <div class = "overlay"></div>
      <div class = "modal">...</div>
    </form>
  </body>
</html>

I wasnt sure if that meant anything.

Either we can arrange it so that it can stretch the height/width of the overlay or we can make it so the overlay and modal move when you scroll. I just dont know how to do them

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use this as your overlay:

    .overlay {
        background: transparent url(overlay.png) repeat top left;
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        z-index: 100;
    }

    And this is overlay.png: (right click and save as)
    And this can be your image that is referenced in the background above.

    This is the markup for the overlay:

    <div class="overlay" id="overlay1" style="display:none;"></div>
    • 0