How to Open Links in a Popup Window

Use a popup window only when it serves a clear purpose, such as showing a focused preview or a small tool alongside the current page. For ordinary navigation, a regular link is more predictable: browsers and users control whether a new browsing context appears as a tab or a separate window.

The JavaScript window.open() method can request a popup, but it cannot guarantee the browser's layout, size, or placement. Popup blockers may also reject a request. This guide shows a user-initiated example with a normal link as a fallback.

Open a link in a popup

Keep a real destination in the link's href, then enhance its click with window.open(). Without JavaScript, the link remains ordinary navigation in a new browsing context. The separate fallback link remains available if a browser blocks the popup.

<a
  id="popup-link"
  href="https://kanishkkunal.com/"
  target="_blank"
  rel="noopener"
>
  Open the site in a popup window
</a>

<p>
  Popup blocked?
  <a href="https://kanishkkunal.com/" target="_blank" rel="noopener">
    Open the site in a separate browsing context
  </a>.
</p>

<script>
  document.querySelector("#popup-link").addEventListener("click", (event) => {
    event.preventDefault();

    window.open(
      event.currentTarget.href,
      "_blank",
      "popup,width=600,height=600,noopener"
    );
  });
</script>

Replace the example URL with the page you want to open. Put the script in a JavaScript file loaded after the link, or use a deferred script. The click listener calls window.open() directly during the user's action; delaying it with a timer or waiting for an unrelated asynchronous operation can cause browsers to block it.

The popup and width/height values are requests, not guarantees. A browser may use a tab, enforce minimum dimensions, ignore some features, or apply its own interface. Mobile browsers in particular may handle the request differently. Avoid relying on exact placement or on older flags such as scrollbars=no and resizable=no; users need to be able to resize, scroll, and control their browsing context.

Handle popup blocking and security

Keep the regular link visible rather than trying to silently work around a popup blocker. The noopener feature prevents the opened page from accessing the page that opened it through window.opener. When noopener is used, window.open() can return null even when the new context opened, so that return value is not a reliable way to distinguish success from a blocked popup. See the current MDN documentation for Window.open() and MDN's reference for the noopener link relation.

The popup request must be made in response to a direct user action, such as the link click above. Do not open popups automatically on page load, or launch several windows from one click. Explain that the link opens a new window, and retain a normal navigation option so keyboard, touch, and assistive-technology users are not forced into an unpredictable interaction.

Popup window example

This older screenshot shows the kind of separate window the example requests. Browser controls and popup behavior vary, so the current result may look different.

Popup window or new tab?

Use a popup only when a separate, focused window is part of the task. For a normal external destination, a standard link is usually the better choice:

<a href="https://kanishkkunal.com/" target="_blank" rel="noopener">
  Open the site in a new browsing context
</a>

target="_blank" asks the browser to open another browsing context; it does not promise a tab rather than a window. The rel="noopener" value prevents the destination from controlling the original page. If the destination should open in the current tab, omit target="_blank".

Use popups sparingly, make the destination clear before activation, and leave the final choice of window behavior to the browser and the person using it.