Centred pop-up with styling

Question

I'm creating a website to learn how to write HTML / CSS & JSS and I'm having a little issue with loading a popup box such as this which will run at the click of a button https://gyazo.com/57865b1e9df5054be787f231693a6a6f

I've found this solution, but when I've tried to implement it on the c9.io website I'm getting an error:

Width is not defined please fix or add / global width /

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

When running the script, it opens the window in the top left. I believe it might be that I haven't set the width of the box I want to open, but cannot find the correct place to do so.

Any help & explanation would be greatly appreciated.

Answer 1

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

Answer 2

Actually, the example provided is a div.

If you would use a div instead an external window, you could use pure 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%;
}   

Thanks to Chris Choyier