Ok, I'm going nuts here. I'm trying to implement a basic popup window to display images. If my javascript code is fully specified in an HTML tag with the onclick property, the window pops up correctly. If my IDENTICAL javascript code is called from either the script tag at the beginning of the HTML document or from a separate js file, the link (or image in my case) opens not in a popup, but in the same window. < frustration >

This opens a popup:

<a href="test.jpg" onclick="window.open('test.jpg','test_name','width=500,height=500,scrollbars=no'); return false">test_name</a>

This does not open a popup:

function cleanPopup(url, title) {
window.open(url, title, 'width=500,height=500,scrollbars=no');
return false;
}

<a href="test.jpg" onclick="return cleanPopup('test.jpg', 'test_name')">test_name</a>

Any help would be appreciated.

PS: Tested in Chrome and Firefox.

EDIT:

I've discovered my problem. I originally only called the js file in the head tag. There is something about the layers of div's when created with multiple scripts of a templating tool (Template Toolkit in my case) that makes the original script element within the head element seemingly invisible to the deeper child elements.

I do not know exactly what's going on, and I don't have the time to explore it. I've added this edit just in case some other person has a similar issue and somehow stumbles across this thread. If someone understands this phenomenon, and can explain it, please do.

EDIT 2:

The "name" parameter of the window.open method can not contain spaces for the popup to work in IE. Thanks M$.

Ok, I'm going nuts here. I'm trying to implement a basic popup window to display images. If my javascript code is fully specified in an HTML tag with the onclick property, the window pops up correctly. If my IDENTICAL javascript code is called from either the script tag at the beginning of the HTML document or from a separate js file, the link (or image in my case) opens not in a popup, but in the same window. < frustration >

This opens a popup:

<a href="test.jpg" onclick="window.open('test.jpg','test_name','width=500,height=500,scrollbars=no'); return false">test_name</a>

This does not open a popup:

function cleanPopup(url, title) {
window.open(url, title, 'width=500,height=500,scrollbars=no');
return false;
}

<a href="test.jpg" onclick="return cleanPopup('test.jpg', 'test_name')">test_name</a>

Any help would be appreciated.

PS: Tested in Chrome and Firefox.

EDIT:

I've discovered my problem. I originally only called the js file in the head tag. There is something about the layers of div's when created with multiple scripts of a templating tool (Template Toolkit in my case) that makes the original script element within the head element seemingly invisible to the deeper child elements.

I do not know exactly what's going on, and I don't have the time to explore it. I've added this edit just in case some other person has a similar issue and somehow stumbles across this thread. If someone understands this phenomenon, and can explain it, please do.

EDIT 2:

The "name" parameter of the window.open method can not contain spaces for the popup to work in IE. Thanks M$.

• javascript
• window

• 1 It does open a popup for me. Check your browser's JavaScript console, I'm pretty sure you have a syntax error somewhere. – Álvaro González Commented Apr 10, 2012 at 10:23
• I'm tested this in IE9, IE7-8 (from IE9 DevTools) in standard document mode. I'm tested this in last versions of FireFox, Chrome, Safari and Opera. All works as expected. May be you need to show more plete example. – Andrew D. Commented Apr 10, 2012 at 10:46
• 1 There are no syntax errors - however if there is a popup blocker, the script may fail and then the url is simply followed – mplungjan Commented Apr 10, 2012 at 11:29
• Remember, those two examples work differently in the same browser. In fact, I have the two examples next to each other, and clicking one link opens a popup window, while the other opens a new tab. – s2cuts Commented Apr 11, 2012 at 23:30

5 Answers 5

DEMO HERE

This code is the closest to foolproof you can get in my opinion.

Tested on

• Windows - Fx, Chrome, IE8 and Safari
• iPhone: Mobile Safari

1. adding a target makes the link open in a new window or tab if allowed - in case the script fails for any reason - this is a SIDE-EFFECT which is useful but not the answer to the question.
2. returning true if the window.open fails will also make the click follow the link, hopefully invoking the target - Note that some browsers no longer reacts to target.
3. the height (and width) in the 3rd parameters will enforce the opening in a new window rather than a new tab unless the browser is set to open all new windows in a tab

<html>
<head>
<script type="text/javascript">
window.onload=function() {
 document.getElementById('popup').onclick=function() {
   var w = window.open(this.href, this.target, 
       'width=500,height=500,scrollbars=no');
    return (!w); // opens in new window/tab if allowed
  }
}
</script>
</head>
<body>

<a id="popup" href="test.jpg" target="test_name">test_name</a>
</body>
</html>

use target="_blank"

<a href="whatever" target="_blank"> ...

from HTML, or

window.open(url, '_blank', options)

from javascript

Make new window title random

onclick="PopupCenter(this.href,'random','600','700','yes'); return false;"

and in function:

if(title=='random')
{
title = randomID();
}

try this

function mypopup()
{
    mywindow = window.open("http://www.test.", "mywindow", "location=1,status=1,scrollbars=1,  width=100,height=100");
}

Make sure you put your javascript code in the Head block

<head>
<script type="text/javascript" language="JavaScript">
function cleanPopup(url, title) {
    window.open(url, title, 'width=500,height=500,scrollbars=no');
    return false;
}
</script>

And in the body:

<a href="" onclick="cleanPopup('test.jpg','test_name')">test_name</a>

It just work for me without any problem both in Firefox and IE