skip to Main Content

I’m trying to add an overlay to my page which is 100% in size. The problem is that the inner divs and buttons are not clickable anymore. Is there a way out of this?

I used the answer here to add the overlay: CSS: How to get this overlay to extend 100% with scrolling?

What i’m trying to achieve is like the mask we add to a layer/group in photoshop.

Thanks

2

Answers


  1. The overlay, being on a layer above that of the button container, is most likely intercepting pointer events. Disable them:

    .overlay {
        pointer-events: none;
    }
    
    Login or Signup to reply.
  2. you need to use a little bit of JavaScript or JQuery

    here is the html page with JQuery and CSS

     <!doctype html>
    <html lang="en">
      <head>
        <title>
            tester
        </title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>
        <script>
            $(document).ready(function(){
                $("button").click(function(){
                   $(".overlay").fadeIn();
                   $(".popup").fadeIn();
                });
    
                 $(".overlay").click(function(){
                   $(".overlay").hide();
                   $(".popup").hide();
                });
            });
        </script>
    
    
        <style>
            *
            {
                margin: 0px;
                padding: 0px;
                box-sizing: border-box;
                font-family: "helvetica ";
            }
            button
            {
                position: absolute;
                left: 47%;
                height: 50px;
                border: none;
                top: 10%;
                width: 5%;
                border-radius: 10px/150px;
                transition: 0.5s;
                z-index: -2;
            }
            button:hover
            {
                cursor: pointer;
                background: #212121;
                color: white;
                font-size: 20px;
            }
    
            .overlay
            {
                position: fixed;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 667px;
                background: black;
                z-index: 1000;
                opacity: 0.5;
                display: none;
            }
    
            .overlay:hover
            {
                cursor: pointer;
            }
    
            .popup
            {
                width: 50%;
                height: 350px;
                background: white;
                z-index: 1001;
                position: absolute;
                left: 25%;
                top: 25%;
                border-radius: 20px;
                padding:15px;
                text-align: center;
                font-size: 36px;
                display: none;
            }
        </style>
    </head>
    <body>
        <button>
            Pop up
        </button>
    
        <div class="overlay">
    
        </div>
        <div class="popup">
            <p>AM A Pop Up</p>
            <input type="button" value="click me">
        </div>
    </body>
    </html>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search