製作JS PopUp響應？

大家好，我正在尋找一個JS彈出響應能夠在大多數屏幕尺寸上查看。目前彈出窗口在頁面中間加載，但在縮短瀏覽器時不會調整大小？製作JS PopUp響應？

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?

來源

2016-07-27 giofus

基本上，你必須設置最大寬度，這將有助於以適應彈出寬度是小於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/

來源

2016-07-27 10:18:44 FvZ

看看我的問題上的更新，它有一個最新情況的圖片？我希望完整的框能夠在屏幕最小化時進行查看。謝謝您的幫助。 – giofus

與@beerwin代碼組合了一下這個工作。感謝百萬 – giofus

在這種情況下，您可以同時提出兩個問題並接受最能幫助您的問題。 – beerwin

更改寬度最大寬度

#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%); 
}

來源

2016-07-27 09:59:14

感謝您的答覆，但仍然沒有工作？它將仍然坐在相同的位置，當頁面被最小化時，該框將被從視圖中切斷。 – giofus

替換此屬性 - transform：translate（-50％， - 50％）; –

你有靜態的寬度在deffinition

#popup { 
    width: 555px; 
.. 
}

使用 '％' 情商。

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

，也可以使用自舉類等COL-MD-6，COL-MD-12（請參閱上引導頁定義），但除去寬度：555px;

來源

2016-07-27 09:59:24 alexey

感謝您的答覆，但仍然無法正常工作？它仍然坐在相同的位置，並且當頁面被最小化時，框將被切斷。我在上面的鏈接中添加了一張圖片，以顯示發生了什麼。 – giofus

刪除頂部邊距：50％;剩下：50％;在看到整個內容後，您可以添加一些像20px一樣的邊距; – alexey

變化width變爲max-width,height變爲max-height並且增加height: 90%; width: 90%。這將使其響應。

然後更新您的PopUp功能，自動調整彈出窗口的位置，使其始終適合屏幕。

見下文一個工作例如：

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>

來源

2016-07-27 10:10:23 beerwin

用@FvZ代碼組合了一下這個工作..感謝百萬.. – giofus

在這種情況下，你可以同時提出兩個問題並接受最能幫助你的問題。 – beerwin

製作JS PopUp響應？

回答

相關問題