How can I centre a div dynamically to where my page is and make the page 'disabled' when the div shows?

Question

I'm trying to do that when a button is pressed, it will display a div in the middle of the page no matter where my page is, it can be on the bottom part or top part of the page and still it would be in the middle. I'm using position: absolute because I need it to be 'floating' above other elements.

I searched everywhere and didn't see how to do it. Only in the middle, but not 'dynamically'.

Also, how can I make the rest of the page that is behind the div disabled?

my current css:

#buyComponentTesting{
    background-color: blue;
    z-index: 99;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 26%;
    left: 40%;
}

score 1 · Answer 1 · answered Apr 30 '20 at 17:28

#buyComponentTesting{
    background-color: blue;
    z-index: 99;
    width: 200px;
    height: 200px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
}

The code above will center the div. top and left will move the upper right corner of the div to the center of the page but to actually have the div sit in the center we would need to move if left by its width / 2 and up by its height / 2 which is done with transform property.

Also you cloud center the div horizontally use left: 50%; transform: translateX(-50%); Note: Code above has position: fixed to have the div appear even when scrolling.

To have the rest of the page "disabled" as You mentioned, one option would be to create an overlay with fixed or absolute position which will sit above all element except for the div. You can either use ::before selector or separate element to create overlay

div::before, .overlay{
   content: ""; //Add this property only when using ::before or ::after, otherwise they won't be displayed
   position: fixed;
   top: 0;
   left: 0;
   z-index: 80; /*Less then z-index of the div*/
   background-color: rgba(0, 0, 0, 0.7);
   width: 100%;
   height: 100%;
}

I don't understand the part of the disabled, it painted the screen all black, before I even rendered the component that should disable the rest. Im working with ReactJS. — pythwan, Apr 30 '20 at 17:41

Aravinth Ramesh · Accepted Answer · 2020-04-30T17:37:00.227

As already suggested, it should be position:fixed instead of position:absolute. Please avoid other CSS written for demo.

.page{
  pointer-events:none;//page disabled
 /*Not required for this solution*/
  width:100%;
  height:100%;
/*Not required for this solution*/  
}

#buyComponentTesting{
  position:fixed;
  width:100px;
  height:100px;
  top:calc(50% - 50px);
  left:calc(50% - 50px);
  pointer-events:all; /*but the div is accessible*/
  
  /*Not required for this solution*/
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  background:beige;
  cursor:pointer;
  /*Not required for this solution*/
}

#buyComponentTesting:hover{
    border-color:#333;
}

<div class="page">
    <div id="buyComponentTesting">The DIV</div>
</div>

how can I make it, that the wanted div that should be displayed is above the opacity? I did that it kinda covers the page with white page, with opacity of 0.5. — pythwan, Apr 30 '20 at 18:46

Rahul Vyas · Answer 3 · 2020-04-30T17:37:08.590

Use position: fixed; instead of position: absolute;. From below code, this is will be show in the middle.

#buyComponentTesting {
                background-color: blue;
                z-index: 999;
                width: 200px;
                height: 200px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

But If you want to create like popup than use this

.container {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 999;
      background: rgba(0, 0, 0, 0.3);
    }
    
    #buyComponentTesting {
            background-color: blue;
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

<div class="container">
  <div id="buyComponentTesting">
  </div>
</div>

I think, it will be helpful for you.

score 0 · Answer 4 · answered Apr 30 '20 at 17:23

0

#buyComponentTesting{
    background-color: blue;
    z-index: 999;
    width: 200px;
    height: 200px;
    position: relative;
    margin : auto;
    transform: translate(-50%, -50%);
}

Please try the above code share your feedback

answered Apr 30 '20 at 17:23

Rajesh

89
5

How can I centre a div dynamically to where my page is and make the page 'disabled' when the div shows?

4 Answers4