带样式的居中弹出窗口

Question

我正在创建一个网站来学习如何编写 HTML / CSS 和 JSS，我在加载像这样的弹出框时遇到了一些问题，它将运行点击按钮 https://gyazo.com/57865b1e9df5054be787f231693a6a6f

我找到了这个解决方案，但是当我试图在 c9.io 网站上实施它时，我收到一个错误：

宽度未定义请修复或添加/全局宽度/

function PopupCenterDual(url, title, w, h) {
   // Fixes dual-screen position Most browsers Firefox
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;

width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);

// Puts focus on the newWindow
if (window.focus) {
newWindow.focus();
}

当运行运行脚本时，它会打开左上角的 window。我相信可能是我没有设置要打开的框的宽度，但找不到正确的位置。

任何帮助和解释将不胜感激。

Answer 1

这是居中的 div 样式，我从用于在 div 中显示消息的函数中获取它：style="position: fixed;width: 50%; left: 25%; top: 30%;"

Answer 2

实际上，example provided 是 div。

如果您要使用 div 而不是外部 window，您可以使用纯 CSS:

.popup {
   /*center the div*/
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);

   /*dimensions and other settings*/
   box-sizing: border-box;
   width: 50%;
   padding: 2em;
   }

body {
   width: 100%;
   height: 100%;
}

感谢Chris Choyier

带样式的居中弹出窗口

Centred pop-up with styling

html

javascript

css

popup