CODEWITHSUNDEEP
javascriptpopupwindow
Aindriú
Aindriú

Reputation: 3730

Popup working on one browser but not another

Why would a popup work on one browser (works on firefox, firefox developer edition) but not another (not on Internet explorer, partially on Chrome) ? In some cases the popup would work on some pages of a website on a browser but going to another page on the site the same popup would not work. The popup is in the footer

<a href="#" onclick="PopupCenter('/terms_conditions.aspx','','550','700')">Terms
                        &amp; Conditions</a>

any ideas ?

edit popup function :

<div class="footerTwoBox">
                    <ul class="footTwoLinks" style="width: 500px; float: left;">
                        <li><a href="/voucher">Your Voucher</a></li>
                        <li><a href="#" onclick="PopupCenter('/privacy_policy.aspx','','550','700')">Privacy
                        Policy</a></li>
                        <li><a href="<%=rootUrl %>/customer-care">Contact Us</a></li>
                        <li><a href="/press-room">Press Room</a></li>
                        <li><a href="#" onclick="PopupCenter('/terms_conditions.aspx','','550','700')">Terms
                        & Conditions</a></li>
                        <li><a href="/partners">Partners</a></li>
                        <li><a href="/blog">Blog</a></li>
                        <li><a href="/careers">Careers</a></li>
                        <li><a href="/customer-care/faq" target="_blank">FAQs</a></li>

                    </ul>

when you click on popup it just brings you to the top of the screen - with no popup. If i go to firefox - i will get the popup in the middle of the screen... it must be some kind of broswer issue but I can't identify it.

popup function

function PopupCenter(pageURL, title, w, h) {
            //alert(w + "  " + h);
            var left = (screen.width / 2) - (w / 2);
            var top = (screen.height / 2) - (h / 2);
            var targetWin = window.open(pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
        }

Upvotes: 2

Views: 2490

Answers (1)

user1438038
user1438038

Reputation: 6059

It is good practice to return false in your onclick handler. The link normally leads to the page you want it to show, while the popup script is called in the event handler. When you return false in your function, you prevent the browser from following the link.

This might or might not affect the behaviour of your browser, depending on the software you use. There is a very good write-up of this topic here, that covers most of the pitfalls.

Please try the following code:

function PopupCenter(pageURL, title, w, h) {
  left = (screen.width / 2) - (w / 2);
  top = (screen.height / 2) - (h / 2);
  targetWin = window.open(pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);

  if (window.focus) {
    targetWin.focus();
  }

  return false;
}

Then you can call it like this (notice the additional return keyword):

<a href="#" onclick="return PopupCenter('terms_conditions.aspx', '', '550', '700')">Terms &amp; Conditions</a>

Complete demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Popup Demo</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />

  <script type="text/javascript">
    <!--
    function PopupCenter(pageURL, title, w, h) {
      left = (screen.width / 2) - (w / 2);
      top = (screen.height / 2) - (h / 2);
      targetWin = window.open(pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);

      if (window.focus) {
        targetWin.focus();
      }

      return false;
    }
    // -->
  </script>
</head>

<body>
  <div>
    <a href="#" onclick="return PopupCenter('terms_conditions.aspx', '', '550', '700')">Terms &amp; Conditions</a>
  </div>
</body>

</html>

Upvotes: 1

Related Questions