Question

大家好我想制作一个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?

Answer 1

基本上你必须设置max-width，这有助于使弹出宽度适合小于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

将宽度更改为最大宽度

var initialAlarmColumns = [{
                columnName: "Alarm",
                value: true
            }, {
                columnName: "Description",
                value: true
            }, {
                columnName: "Acknowledged by",
                value: false
            }];

        if (localStorage.getItem('alarmColumns') === null) {
            localStorage.setItem('alarmColumns', JSON.stringify(initialAlarmColumns));
        }

        $scope.alarmColumns = JSON.parse(localStorage.getItem('alarmColumns'));

        $scope.setAlarmColumns = function(columnsChecked) {
            localStorage.setItem('alarmColumns', JSON.stringify(columnsChecked));
        };

Answer 3

你的定义中有静态宽度

#popup {
    width: 555px;
..
}

使用'％'eq。

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

或者你可以使用像col-md-6，col-md-12这样的引导类（参见bootstrap页面上的定义），但是删除宽度：555px;

Answer 4

将width更改为max-width，将height更改为max-height并添加height: 90%; width: 90%。这将使其响应。

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

请参阅下面的工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

使JS PopUp响应？

4 个答案: