javascript에서 동적으로 코드 크기가 조절되지 않습니다.

Question

이 모달 코드가 있고 너비와 높이를 동적으로 계산하여 모달 div에 추가하려고합니다.하지만 웹 사이트에 트리거 코드를 넣을 때 온라인 호스팅)이 크기 조정 코드는 제대로 작동하지 않습니다. 동적으로 크기를 조정하지는 않지만 Xampp 서버 (localhost)에서이 코드를 테스트하면 올바르게 작동합니다.

사이트와의 충돌을 피하기 위해 Jquery를 사용하고 싶지 않습니다. 아래 http://jesusbwebdesigner.com/staging_sdv/en 버튼 콜 "오픈 모달는"이 슬라이더에

, 그

어떤 생각의 예입니다?

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