Code Größe dynamisch in Javascript funktioniert nicht gut

Question

Ich habe diesen Modal Code und ich versuche, die Breite und die Höhe dynamisch zu berechnen und fügen Sie dies zu einem modalen div, aber wenn ich den Trigger - Code innerhalb einer Website (in ein hosting online) dieser resize-code funktioniert nicht gut, nicht die resize dynamisch aber wenn ich diesen code in einem Xampp-server (in localhost) testen es funktioniert gut.

Ich möchte Jquery nicht verwenden, um Konflikte mit der Site zu vermeiden.

In http://jesusbwebdesigner.com/staging_sdv/en unten Schieber befindet sich eine Schaltfläche Aufruf „open modal“, das ist das Beispiel

Jede Idee?

<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

Versuchen Sie, Breite und Höhe im Pixelformat hinzuzufügen. Aktualisieren Sie daher Ihren Methodencode in der scriptBucket.js-Datei mit diesem.

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"); 
}