JS PopUpを反応的にするには？

Question

こんにちは私はほとんどの画面サイズで見ることができるように応答するJSポップアップを作るために探しています。現時点では、ポップアップはページの中央にロードされますが、ブラウザが短縮されるとサイズが変更されません。

HTML：

<div class="col-lg-12"> 
    <div id="ac-wrapper" style='display:none'> 
    <div id="popup"> 
     <center> 
     <h2>Popup Content Here</h2> 
      <input type="submit" name="submit" value="Submit" onClick="PopUp('hide')" /> 
     </center> 
    </div> 
    </div> 
</div> 

CSS：

#ac-wrapper { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(255, 255, 255, .6); 
    z-index: 1001; 
} 
#popup { 
    width: 555px; 
    height: 375px; 
    background: #222; 
    border: 5px solid #000; 
    border-radius: 25px; 
    -moz-border-radius: 25px; 
    -webkit-border-radius: 25px; 
    box-shadow: #64686e 0px 0px 3px 3px; 
    -moz-box-shadow: #64686e 0px 0px 3px 3px; 
    -webkit-box-shadow: #64686e 0px 0px 3px 3px; 
    position: relative; 
    top: 150px; 
    left: 375px; 
} 

JS：

function PopUp(hideOrshow) { 
      if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none"; 
      else document.getElementById('ac-wrapper').removeAttribute('style'); 
     } 
     window.onload = function() { 
      setTimeout(function() { 
       PopUp('show'); 
      }, 5000); 
     } 

更新：

Here's whats happening! the popup box is still not resizing to the page dimensions

更新：最大幅に

Thanks for the help @beerwin the following link shows the popup box now floats up in the corner of the page?

Answer 1

基本的にあなたが555px未満の画面にポップアップ幅に合うように役立つの最大幅を設定する必要があります（555px - ポップアップの幅）。正確な要件についてはわかりませんが、ここでは、ポップアップを水平に中央に配置する必要があると仮定することでできることを示しています。ここで

#popup{ 
    max-width: 555px; 
    height: 375px; 
    position:absolute; 
    /* your rest of the styles */ 
} 

/* To align horizontally center for screens greater than 555px width */ 
@media (min-width:555px){ 
    #popup{ 
     left:calc(50% - 277px); /* 277px is the half of 555px */ 
    } 
} 

はフィドルです：https://jsfiddle.net/3js5mLpb/

Answer 2

変更幅

#popup { 
    max-width: 555px; 
    height: 375px; 
    background: #222; 
    border: 5px solid #000; 
    border-radius: 25px; 
    -moz-border-radius: 25px; 
    -webkit-border-radius: 25px; 
    box-shadow: #64686e 0px 0px 3px 3px; 
    -moz-box-shadow: #64686e 0px 0px 3px 3px; 
    -webkit-box-shadow: #64686e 0px 0px 3px 3px; 
    position: relative; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
} 

Answer 3

あなたのdeffinition

#popup { 
    width: 555px; 
.. 
} 

使用 '％' 式の静的な幅を持っています。

#popup { 
    width: 80%; 
    ... 
} 

か、COL-MD-6、COL-MD-12（ブートストラップ・ページ上の定義を参照）のように、ブートストラップクラスを使用しますが、幅は削除することができます：555pxを。

Answer 4

widthからmax-width,heightからmax-heightに変更し、height: 90%; width: 90%を追加してください。これにより応答性が向上します。

ポップアップ機能を更新して、常に画面に収まるようにポップアップの位置を自動的に調整します。

以下の実施例を参照してください。

function PopUp(hideOrshow) { 
 
     var popup = document.getElementById('ac-wrapper'); 
 
     if (hideOrshow == 'hide') { 
 
      popup.style.display = "none"; 
 
     } 
 
     else { 
 
      popup.removeAttribute('style'); 
 
      popup.style.marginLeft = (popup.offsetWidth/2) * -1 + "px"; 
 
      popup.style.marginTop = (popup.offsetHeight/2) * -1 + "px"; 
 
     } 
 
     } 
 
     window.onload = function() { 
 
      setTimeout(function() { 
 
       PopUp('show'); 
 
      }, 1000); 
 
     }

#ac-wrapper { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(255, 255, 255, .6); 
 
    z-index: 1001; 
 
} 
 
#popup { 
 
    width: 90%; 
 
    height: 90%; 
 
    max-width: 555px; 
 
    max-height: 375px; 
 
    background: #222; 
 
    border: 5px solid #000; 
 
    border-radius: 25px; 
 
    -moz-border-radius: 25px; 
 
    -webkit-border-radius: 25px; 
 
    box-shadow: #64686e 0px 0px 3px 3px; 
 
    -moz-box-shadow: #64686e 0px 0px 3px 3px; 
 
    -webkit-box-shadow: #64686e 0px 0px 3px 3px; 
 
    position: relative; 
 
    top: 50%; 
 
    left: 50%; 
 
}

<div class="col-lg-12"> 
 
    <div id="ac-wrapper" style='display:none'> 
 
    <div id="popup"> 
 
     <center> 
 
     <h2>Popup Content Here</h2> 
 
      <input type="submit" name="submit" value="Submit" onClick="PopUp('hide')" /> 
 
     </center> 
 
    </div> 
 
    </div> 
 
</div>