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