javascript - 如何将 div 动态居中到我的页面所在位置，并在 div 显示时使页面为 'disabled'？

Question

这个问题已经有答案了:

How to center a "position: absolute" element (31 个回答)

已关闭 3 年前。

当 button 时，我正在尝试这样做按下后，会显示 div在页面的中间无论我的页面在哪里，它可以在页面的底部或顶部，但仍然会在中间。我正在使用position: absolute因为我需要它“ float ”在其他元素之上。

我到处找了，没找到怎么做。仅在中间，但不是“动态”。

另外，我怎样才能制作 div 后面的页面的其余部分？已禁用？

我当前的CSS:

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

Answer 1

正如已经建议的，它应该是 position:fixed 而不是 position:absolute。请避免为演示编写其他 CSS。

.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>