CODEWITHSUNDEEP
javascripthtmlcsspopupcenter
treboothjD6
treboothjD6

Reputation: 75

Center Popup in Current Window

I've implemented a JavaScript function that shows a popup when a particular image is clicked; however, the popup and the cover (transparent grey cover behind the popup that when clicked makes the popup go away) won't move to the center of the current window. As the image can be clicked wherever it is visible, the popup needs to open in the center (which will have a dynamic height and static width) of the page in its current position (when the image was clicked). I also need this to work with multi-monitor setups. I found this JavaScript

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

but I'm fairly new to JavaScript and I'm not sure how to implement something like this. If there is a fix using HTML and CSS then I'd much prefer that, but a simple JavaScript fix that I can follow is fine. Thanks if you can help.

My code is here: http://jsbin.com/EMAHetA/4/edit

Upvotes: 0

Views: 2583

Answers (4)

treboothjD6
treboothjD6

Reputation: 75

I'd rather not have to answer my own question again, but I've figured out how to do it, and this method isn't in any of the answers. Anyway, the idea is actually rather simple. First determine the dimensions of the popup, which in my case is 1280px x 720px. Then give the popup this css (in context):

position:fixed;
top:50%;
left:50%;
margin:-360px 0 0 -640px;

What this does is set the position of the popup's top-left corner at the center of the screen, and then set the left and top dimensions of the popup back by half of its own dimensions, effectively moving the center of the popup to the center of the screen. To use this method yourself, all you need to do is adjust the various dimensions accordingly.

Upvotes: 0

trekforever
trekforever

Reputation: 3922

If you do not want to use javascript or any external modal libraries and instead want to use pure css, you can just add the following css code to your div element

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Fiddle: http://jsfiddle.net/mBBJM/1/

Upvotes: 1

Paul S.
Paul S.

Reputation: 66304

Using the PopupCenter code you have provided, you could do the following.

In HTML (I use JSON in a data attribute to make it easy). The class will be used to find the nodes.

<span
    class="popup"
    data-popup='{"s": "http://google.com", "t": "Google", "h": 400, "w": 400}'
>Click me!</span>

In JavaScript

window.addEventListener('load', function () { // wait for nodes to exist
    var popups = document.getElementsByClassName('popup'), // get all the popups
        i = popups.length; // for iterating
    function clickPopupNode() { // function describing actions to take
        var obj = JSON.parse(this.getAttribute('data-popup'));
        PopupCenter(obj.s, obj.t, obj.h, obj.w);
    }
    while (i-->0) { // iterate over each matching node
        popups[i].addEventListener('click', clickPopupNode); // and attach func
    }
});

Demo

Except your PopupCenter code function does not seem to work as you intend; try this simplified version instead

function PopupCenter(s, t, h, w) {
    var y = (window.screen.height - (h | 0)) / 2,
        x = (window.screen.width - (w | 0)) / 2;
    window.open(
        s, t,
        'scrollbars=yes, width='+w+', height='+h+', top='+y+', left='+x
    ).focus();
}

Demo 2

Upvotes: 1

Eric Tjossem
Eric Tjossem

Reputation: 2706

What I think you're trying to create here is typically called a modal, and it's possible to pull one off in pure CSS. You can also implement a modal in jQuery: do some searching for "jquery modal" and see what you get. I recommend Foundation Reveal (if you don't mind including some other useful js) or Kyle Fox's modal code (super lightweight).

Upvotes: 1

Related Questions