Question

我有这个模态代码，我正在尝试动态计算宽度和高度并将其添加到模态div，但是当我将触发器代码放入网站（进入在线托管）时，这个调整大小的代码没有工作正常，不是动态调整大小，但是当我在Xampp服务器（在localhost中）测试此代码时，它工作正常。

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

在滑块下面的http://jesusbwebdesigner.com/staging_sdv/en，有一个按钮调用“open modal”，即示例

有什么想法吗？

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

Answer 1

尝试以像素格式添加宽度和高度。所以用这个更新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");
}

代码在javascript中动态调整大小不正常

1 个答案: