javascript中动态调整代码大小的操作不正常

我有这个模式代码，我试图动态计算宽度和高度，并将其添加到模式div中，但当我将网站内的触发器代码放入在线主机时，此调整大小代码不正常，动态调整大小也不正常，但当我在localhost中的Xampp服务器中测试此代码时，它正常工作

我不想使用Jquery来避免与网站发生任何冲突

在下面的to slider中有一个按钮调用open model，这就是示例

有什么想法吗

<div id="myModalButton" class="modalBucket">
  <div class="modal-content-bucket">
   <span class="close-bucket">&times;</span>
  </div>
</div>

var modal = document.getElementById('myModalButton');
var modalContent = document.getElementsByClassName('modal-content-bucket');


modal.style.width = window.innerWidth;
modal.style.height = window.innerHeight;
modalContent[0].style.width = window.innerWidth - 40;
modalContent[0].style.height = window.innerHeight - 40;

---

尝试以像素格式添加宽度和高度。因此，用这个更新scriptBucket.js文件中的方法代码

btn.onclick = function() {
    modal.style.width = window.innerWidth+"px";
    modal.style.height = window.innerHeight+"px";
    modalContent[0].style.width = (window.innerWidth - 40)+"px";
    modalContent[0].style.height = (window.innerHeight - 40)+"px";
    modal.style.display = "block";
    document.body.classList.add("open-modal-bucket");
}

---

你能提供你的网址吗？下面的幻灯片中有一个按钮调用打开模式