3

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.

Trunks159
  • 91
  • 9

4 Answers4

4

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.

Dula
  • 1,276
  • 5
  • 14
  • 23
1

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

Julien Verkest
  • 51
  • 3
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

Sanmeet
  • 1,191
  • 1
  • 7
  • 15
  • 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 Sep 23 '21 at 16:26
  • @Trunks159 Yes it is possible ! Just give the button a class and then you can style it accordingly.. – Sanmeet Sep 24 '21 at 04: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;
    }
vishnu kumar
  • 35
  • 5