Question

如何始终在页面中心显示弹出窗口，如下所示：

PopupCenter(url, title, w, h) {
var userAgent = navigator.userAgent,
    mobile = function() {
      return /\b(iPhone|iP[ao]d)/.test(userAgent) ||
        /\b(iP[ao]d)/.test(userAgent) ||
        /Android/i.test(userAgent) ||
        /Mobile/i.test(userAgent);
    },
    screenX = typeof window.screenX != 'undefined' ? window.screenX : window.screenLeft,
    screenY = typeof window.screenY != 'undefined' ? window.screenY : window.screenTop,
    outerWidth = typeof window.outerWidth != 'undefined' ? window.outerWidth : document.documentElement.clientWidth,
    outerHeight = typeof window.outerHeight != 'undefined' ? window.outerHeight : document.documentElement.clientHeight - 22,
    targetWidth = mobile() ? null : w,
    targetHeight = mobile() ? null : h,
    V = screenX < 0 ? window.screen.width + screenX : screenX,
    left = parseInt(V + (outerWidth - targetWidth) / 2, 10),
    right = parseInt(screenY + (outerHeight - targetHeight) / 2.5, 10),
    features = [];
if (targetWidth !== null) {
  features.push('width=' + targetWidth);
}
if (targetHeight !== null) {
  features.push('height=' + targetHeight);
}
features.push('left=' + left);
features.push('top=' + right);
features.push('scrollbars=1');

var newWindow = window.open(url, title, features.join(','));

if (window.focus) {
  newWindow.focus();
}

return newWindow;
}

我可以在角度2中使用以上概念吗，或者有其他方法可以使用？如果您有任何想法请与我分享。我的脚本：https://stackblitz.com/edit/angular-ltzckd?file=src/app/app.component.html

Answer 1

仅举一个示例，说明如何仅使用CSS即可实现（当然，可能会有更好的解决方案）：

<div class="popup-container">
  <div class="popup">
    Popup content
  </div>
</div>

和CSS：

.popup-container {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.4);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup {
  width: 400px;
  height: 400px;
  background-color: white;
}

这里是链接： https://jsbin.com/xulatinayo/1/edit?html,css,output

如何以角度5显示窗口的始终模式弹出窗口中心

1 个答案: