On my website (Password is "WS" without the quotes) I created a grid with a plugin (UberGrid).

To make each cell a popup I added the following code inside this Wordpress page:

<script type="text/javascript">
function popWin(url)
{
    var thePopCode = window.open(url,'','height=800, width=1000, top=500, left=200, scrollable=yes, menubar=yes, resizable=yes');
    if (window.focus) 
    {
        thePopCode.focus();
    }
}
</script>

Inside the plugin (inside the Debra Porter cell) I added the following link:

javascript: onclick=popWin(''); return (false);

It works fine in Google Chrome but no results in Firefox or Safari.

On my website (Password is "WS" without the quotes) I created a grid with a plugin (UberGrid).

To make each cell a popup I added the following code inside this Wordpress page:

<script type="text/javascript">
function popWin(url)
{
    var thePopCode = window.open(url,'','height=800, width=1000, top=500, left=200, scrollable=yes, menubar=yes, resizable=yes');
    if (window.focus) 
    {
        thePopCode.focus();
    }
}
</script>

Inside the plugin (inside the Debra Porter cell) I added the following link:

javascript: onclick=popWin('http://www.weybridgestrategies./team/debra-porter-president-ceo'); return (false);

It works fine in Google Chrome but no results in Firefox or Safari.

• javascript
• cross-browser

• I added a Text link above the grid: <a href="weybridgestrategies./team/debra-porter-president-ceo" onclick="popWin(this.href); return (false);">TestLink</a> This one works fine in every browser. – clauenmexico Commented Jul 16, 2013 at 1:18
• Just for sake of argument here, unless there's some specific reason why you need to specify the size of the window and position, etc, you really should just add target="_blank" to your <a> tag. 90% of your users will never see the popup and instead will get a "hey we blocked a popup" message from their browser the way you plan to do it. It's also pretty well accepted convention that if you don't need the popup for persistent data (help, instructions, etc) you should keep your links "normal" (i.e. without a popup) for the most part. Just some friendly advice ;) – Brian Commented Jul 16, 2013 at 1:24
• Hi Brian Thank you very much for your input. You are so right! Is there a way to code something like: If popups are blocked do target="_blank"? Thank you very much! Claudia – clauenmexico Commented Jul 16, 2013 at 1:39
• stackoverflow./questions/668286/… There's lots of questions on here around the same topic, but in short you want to look at the result of your variable thePopCode to determine if the window was opened successfully or not. – Brian Commented Jul 16, 2013 at 1:43
• Thank you Brian! I will read through that post. – clauenmexico Commented Jul 16, 2013 at 1:51

2 Answers 2

Have a look on what HTML is produced:

<a class="uber-grid-hover" href="onclick=popWin(&#039;http://www.weybridgestrategies./team/debra-porter-president-ceo&#039;); return (false);"  >

How it should look like:

<a class="uber-grid-hover" href="http://www.weybridgestrategies./team/debra-porter-president-ceo"
   onclick="popWin('http://www.weybridgestrategies./team/debra-porter-president-ceo'); return false;">

So your popWin function is already ok, but you need to justify the anchor's attributes href and onclick. onclick is javaScript, so you don't need the javaScript prefix, and also you don't need inline onclick= because this creates a global variable. The return false will prevent the browser to follow the href, if javascript is available. By using this.href this is will not do what you expect at least in IE, because this is in IE the event, not the anchor.

EDIT: Actually your TestLink does what you intended, as of Firefox Aurora v24, without blocking-a-popup.

But I have to follow Brian's ment, that your new window may be considered a popup, so it would be the best if you do window.open(url, '_blank') or simply use <a target="_blank" href="..."> - and looking for a javaScript "popup" that doesn't load a new page, but looks more HTML5ish, for example using jQuery UI or by trying your own jS (and that would be another answer to a much bigger question... ;))

UPDATE: A good idea unleashing your jQuery already included, lets speak javaScript:

<script type="text/javascript">
function popWin(url)
{
  var thePopCode = window.open(url,'','height=800, width=1000, top=500, left=200,scrollable=yes, menubar=yes, resizable=yes');
  if (window.focus) {
    thePopCode.focus();
  }
}

jQuery(document).ready(function ($) {
    // here is your HTML DOM ready

    // create an onclick event for every a.uber-grid-hover
    $("a.uber-grid-hover").click(function (event) {

        event.preventDefault(); // this is "like" return false

        // this get's the href from your anchor, using jQuery sugar
        var url = $(this).attr("href");

        // call your fun
        popWin(url);

    });

});

</script>

Using this script, you should no more need to create onclick attributes for every single anchor. Simply put that into your wordpress source, this should work as is.

Now simply make the <a> using class="uber-grid-hover", this is required so that jQuery can select the hovers easily, then you need the href and you may include also target="_blank" so that non-javascript users will also have the page in a new window.

<a class="uber-grid-hover" target="_blank"
   href="http://www.weybridgestrategies./team/debra-porter-president-ceo">

Try this code :

function popwin(url) {
window.open('', url, 'height=800, width=1000, top=500, left=200, scrollable=yes, menubar=yes, resizable=yes');
url.target =url;
}

And for link,use the same code

javascript: onclick=popWin('http://www.weybridgestrategies./team/debra-porter-president-ceo'); return (false);