Javascript 将按钮转换为模式

我试图将一个按钮展开并转换为一个模式，当它被点击时，它的高度和宽度是窗口的60%。这是我迄今为止工作的代码笔：。我遇到的问题是，

position

属性无法转换。按钮和模态（位于按钮下方）都绝对位于按钮包装内，以使两个元素看起来像一个元素。单击按钮时，模式应扩展到覆盖顶部的固定位置

---

问题是定位会立即从

绝对值

更改为

固定值

，因此模式看起来就像是从整个窗口大小收缩过来的。如果删除

#btn content.active

类上的

position:fixed

属性，您可以看到我实际上在做什么。如何模拟

位置

属性的转换？如果这是不可能的，我如何将模式转换为与窗口大小相关的高度和宽度？非常感谢您的时间。

我将使用

getBoundingClientRect（）

创建与现有元素大小相同的固定元素，然后转换为完整元素size@Markasoftware谢谢，我现在就用这个。我仍然会尝试找到一种使用css的方法。我非常确定，不可能让一个绝对定位的元素相对于窗口具有顶部和左侧