Question

Here’s my JavaScript code.

<SCRIPT TYPE="text/javascript">
<!--
function popup(mylink, windowname) {
    if (! window.focus) return true;
    var href;
    if (typeof mylink  == 'string')
        href=mylink;
    else
        href = mylink.href;
    window.open(href, windowname, 'width=500,height=500,scrollbars=yes');
    return false;
}
//-->
</SCRIPT>

Using just the code above, the pop up appears exactly how i want it, but it appears snuggly tucked into the upper left hand corner. I want the pop up to appear centered.

I’ve tried several suggestions on this website (such as:

var left = screen.width / 2 - w / 2;
var top = screen.height / 2 - h / 2;

but plugging anything else into the code i already have makes the pop up open in a new tab of the same browser (ignoring the pop up function).

That’s the problem I came here to have solved.

Additionally, I’d like to fade the background to draw the reader’s focus to the pop up. Is there a javascript snippet that i can toss in that will do so?

Answer 1

Try this:

function popupW(mylink, windowname) {
    var href;
    var w = h = 500;
    var left = (screen.width/2) - (w/2);
    var top = (screen.height/2) - (h/2);

    if(!window.focus) {
        return true;
    }

    if(typeof mylink == 'string') {
        href = mylink;
    } else {
        href = mylink.href;
    }

    window.open(href, windowname, 'width='+w+', height='+h+', scrollbars=yes, top='+top+', left='+left);
    return false;
}
popupW('http://google.com', 'google');

Fading of the background window can be done by creating overlay.

var overlay = document.createElement('div');
overlay.setAttribute('id', 'overlay');
document.body.appendChild(overlay);

With following css style:

#overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99999;
}