15

I am using window.open to open a popup window like so:

<a href="http://path/to/url" onclick="window.open(this.href, 'sharegplus', 'height=485,width=700'); return false;" target="_blank">

I want this to be centered in the screen, but without having to use <script> inline code </script> and merely enter whatever I need within onclick="". Can this be done?

7
  • @Rionmonster The accepted answer to that question is a pretty terrible script, and not even complete.
    – Pointy
    Aug 8, 2011 at 14:26
  • @Pointy, perhaps you could improve upon it and post. Or, at least give some guidance to Alex about what makes it terrible.
    – Brad
    Aug 8, 2011 at 14:27
  • Why do you want it only in the onclick? That's going to get very unreadable, very fast. Aug 8, 2011 at 14:30
  • unless you can make the best alternative. it must be able to be used multiple times in one page, but the width, height and position will always stay the same
    – manc
    Aug 8, 2011 at 14:32
  • 2
    Possible duplicate of Center a popup window on screen?
    – AMIC MING
    Mar 21, 2016 at 19:41

4 Answers 4

32

Edit

This is a bad answer. a much better answer can be found here: window.open() on a multi-monitor/dual-monitor system - where does window pop up?

But in the meantime while i decide when i want to update this answer, this fiddle accounts for dual monitor setups: http://jsfiddle.net/w665x/138/

Original Answer

This might work for you. Not confident in it being entirely cross-browser, but close;

<html>
<head>
<script type="text/javascript">
function goclicky(meh)
{
    var x = screen.width/2 - 700/2;
    var y = screen.height/2 - 450/2;
    window.open(meh.href, 'sharegplus','height=485,width=700,left='+x+',top='+y);
}
</script>
</head>
<body>
<a href="http://path/to/url" onclick="goclicky(this); return false;" target="_blank">blah</a>
</body>
</html>

Fiddle!

1

Also you can try:

$('a.popup-window').on('click', function(){
    var w = 880, h = 600,
        left = Number((screen.width/2)-(w/2)), tops = Number((screen.height/2)-(h/2)),
        popupWindow = window.open(this.href, '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=1, copyhistory=no, width='+w+', height='+h+', top='+tops+', left='+left);
    popupWindow.focus(); return false;
});

And call:

<a href="https://google.com/" class="popup-window">Open in new window</a>
0

This code works perfectly:

//Code Starts
$(document).ready(function() {
   $('#Popup').click(function() {
     var NWin = window.open($(this).prop('href'), '', 'height=800,width=800');
     if (window.focus) 
     {
       NWin.focus();
     }
     return false;
    });
});​
//Code Ends


<a href="http://www.google.com/" id="Popup">Open in Popup window</a>
2
0

This code uses jAplus script. It allows you to do this without writing JavaScript code. (http://japlus.simplit.it)

<head>
   <script src="/path/to/jquery.js" type="text/javascript" charset="utf-8"></script>
   <script src="/path/to/jquery.Aplus.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <a href="http://path/to/url" class="win win-center">
</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.