Javascript 使JS弹出窗口响应？

大家好，我正在寻找一个JS弹出响应，能够在大多数屏幕大小上查看。此时，弹出式加载在页面中部，但浏览器缩短时不调整大小？

HTML:

JS:

更新：

更新：

---

将宽度更改为最大宽度

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

---

定义中有静态宽度

#popup {
    width: 555px;
..
}

使用“%”等式

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

---

或者您可以使用引导类，如col-md-6、col-md-12（请参见引导页面上的定义），但删除宽度：555px

将

宽度

更改为

最大宽度

，

高度

更改为

最大高度

，并添加

高度：90%；宽度：90%

。这将使它具有响应性

然后更新弹出功能，自动调整弹出窗口的位置，使其始终适合屏幕

请参见下面的工作示例：

功能弹出窗口（隐藏显示）{
var popup=document.getElementById（'ac-wrapper'）；
if（hideOrshow=='hide'）{
popup.style.display=“无”；
}
否则{
popup.removeAttribute（'style'）；
popup.style.marginLeft=（popup.offsetWidth/2）*-1+“px”；
popup.style.marginTop=（popup.offsetHeight/2）*-1+“px”；
}
}
window.onload=函数（）{
setTimeout（函数（）{
弹出（“显示”）；
}, 1000);
}

#交流包装器{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（255,255,255,6）；
z指数：1001；
}
#弹出窗口{
宽度：90%；
身高：90%；
最大宽度：555px；
最大高度：375px；
背景：#222；
边框：5px实心#000；
边界半径：25px；
-moz边界半径：25px；
-webkit边界半径：25px；
盒影：64686e 0px 0px 3px 3px；
-moz盒阴影：64686e 0px 0px 3px 3px；
-网络工具包盒阴影：64686e 0px 0px 3px 3px；
位置：相对位置；
最高：50%；
左：50%；
}

此处弹出内容

基本上，您必须设置最大宽度，这将有助于使弹出窗口宽度适合小于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 */
  }
}

---

这是小提琴：

谢谢你的回复，但还是不起作用？它仍将位于相同的位置，当页面最小化时，框将从视图中被切断。替换此属性-transform:translate（-50%，-50%）；谢谢你的回复，但还是不起作用？它仍将位于相同的位置，当页面最小化时，框将从视图中被切断。我已经在上面的链接中添加了一张图片来显示正在发生的事情。删除页边空白，如top:50%；左：50%；在你可以看到整个内容后，你可以添加一些空白，比如20px；看看我的问题的最新进展，它有一张发生了什么的图片？我想完整的框能够看到时，屏幕已最小化。谢谢你的帮助。通过与@beerwin代码的结合，我们可以实现这一点。。在这种情况下，你可以对两个问题进行投票，并接受对你帮助最大的问题。在这种情况下，你可以对两个问题进行投票，并接受对你帮助最大的问题。

#popup {
    width: 555px;
..
}

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

#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 */
  }
}