4

I'm basically trying to implement a popup that blurs the background and makes it so that the user can't touch the buttons and other components in the background.

2
  • try using backdrop-filter and pointer in css !
    – Sanmeet
    Commented Sep 23, 2021 at 6:21
  • Likely dupe
    – mplungjan
    Commented Sep 23, 2021 at 6:31

4 Answers 4

5

You can disable the whole div by using css.

#div-id{
  pointer-events: none;
}

This will disable all the elements inside the div. If you want the blur effect you can add opacity: 0.2; to the div css.

3

You can add this class on your main element container to blur the whole background

.blured {
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

And add pointer-events: none; on your modal or popup

1

By using css backdrop-filter property and pointer-events you can achieve what u need .. see example below

 
    * {
        box-sizing: border-box;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 1rem;
    }

    body {
        margin: 0;
        padding: 0;
    }
    .disabled{
     pointer-events: none;
     color : grey;
    }

    .modal {
        position: fixed;
        inset: 0;
        isolation: isolate;
        background-color: rgba(19, 128, 119, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .popup {
        position: absolute;
        z-index: 1;
        width: 400px;
        background-color: black;
        color: white;
        padding: 1rem;
    }
    .blur{
        position: absolute;
        inset: 0;
        z-index: -1;
        backdrop-filter: blur(0.2rem);
    }
  
<div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid dolorum illo, non incidunt earum natus neque architecto a autem maxime voluptatibus tempora minima, provident expedita quidem cumque ab. Error, tenetur?
</div>
<div class="modal">
    <div class="blur"></div>
    <div class="popup">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi quam architecto minima nihil aliquid quis unde
        illo mollitia iure. Quia.
        <br /> <br /> <br />
        <a href="#" class="disabled">
            I am a disabled link !
        </a>
    </div>
</div>

References : pointer-events and backdrop-filter.

Note: Also remember using pointer events doesn't means you can't use keyboard to focus.. To prevent keyboard tab focus you might need to use tabindex attribute on the link

2
  • Thankyou. Now is it possible to do this from a button inside of the 'text' div? I'm using react right now and the button i have is very far down the tree.
    – Trunks159
    Commented Sep 23, 2021 at 16:26
  • @Trunks159 Yes it is possible ! Just give the button a class and then you can style it accordingly..
    – Sanmeet
    Commented Sep 24, 2021 at 4:49
1
    body{
    position:relative;
    ///rest of your style
    }
    .backdrop {//create a div inside body // <div class".backdrop"></div>
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      z-index: 1;
      backdrop-filter: blur(5px);
    }
    .backdrop:enabled { //here we have disable all pevnts
      pointer-events: none;
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.