Question

我正在创建一个网站，以学习如何编写HTML / CSS＆amp; 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();
}

运行脚本时，它会打开左上角的窗口。我相信可能是因为我没有设置我要打开的盒子的宽度，但找不到正确的位置。

任何帮助＆amp;解释将不胜感激。

Answer 1

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

Answer 2

实际上，example provided是一个div。

如果您使用div而不是外部窗口，则可以使用纯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

带有造型的中心弹出窗口

2 个答案: