Opening Modals with Hash Listeners: A Simple JavaScript Pattern

Sometimes you want to share a URL that opens a modal dialog immediately.
Instead of forcing users to click buttons, you can leverage hash fragments (#something) and the native hashchange event to trigger the modal.

This approach works with plain JavaS…


This content originally appeared on DEV Community and was authored by Emrah G.

Sometimes you want to share a URL that opens a modal dialog immediately.

Instead of forcing users to click buttons, you can leverage hash fragments (#something) and the native hashchange event to trigger the modal.

This approach works with plain JavaScript (or any framework like React, Vue, or Svelte) and keeps your app deep-linkable.

🚀 The Core Idea

  1. Listen for the hashchange event on window.
  2. When the URL hash matches your trigger (#upgrade, for example), open the modal.
  3. Clean up the hash so it can be triggered again later.

🛠️ The handleOpenModal Function

Here’s a simplified version of the logic:

function handleOpenModal() {
  // Only trigger if the hash includes our keyword
  if (window.location.hash.toLowerCase().includes("#upgrade")) {

    // Open the modal (pseudo-code)
    openModal();

    // Clean the hash so the same link can be used again
    const { pathname, search, hash } = window.location;
    let cleanedHash = hash.replace("#upgrade", "").trim();

    const newUrl = pathname + search + (cleanedHash ? `#${cleanedHash}` : "");

    try {
      // Replace the current history entry so the back button isn’t broken
      window.history.replaceState(window.history.state, "", newUrl);
    } catch {
      // Fallback in stricter environments
      window.location.replace(newUrl);
    }
  }
}

You would also need to attach this function:

window.addEventListener("hashchange", handleOpenModal, { passive: true });

🔑 Why This Works

Shareable deep links → In my case I send https://routebot.com + #upgrade (like mysite.com#upgrade) and the modal opens right away.

Back button safety → Cleaning the hash prevents broken navigation.

Reusable → Same link can open the modal multiple times.

🌍 Real-World Use Case

I use this exact technique in RouteBot 🚍, where admins can send deep links that trigger upgrade flows or onboarding modals instantly.

Instead of saying “click here, then press upgrade”, one URL just opens the right dialog.

âś… Wrap-Up

Hash listeners are a lightweight, framework-agnostic solution for modals triggered by links.

No extra query params

No heavy router logic

Just plain JavaScript

If you’re building SaaS, consider this pattern to simplify onboarding or upgrades.
And if you’re into transport SaaS and optimization, check out RouteBot
— we use patterns like this every day. 🚀


This content originally appeared on DEV Community and was authored by Emrah G.


Print Share Comment Cite Upload Translate Updates
APA

Emrah G. | Sciencx (2025-09-10T04:58:49+00:00) Opening Modals with Hash Listeners: A Simple JavaScript Pattern. Retrieved from https://www.scien.cx/2025/09/10/opening-modals-with-hash-listeners-a-simple-javascript-pattern-3/

MLA
" » Opening Modals with Hash Listeners: A Simple JavaScript Pattern." Emrah G. | Sciencx - Wednesday September 10, 2025, https://www.scien.cx/2025/09/10/opening-modals-with-hash-listeners-a-simple-javascript-pattern-3/
HARVARD
Emrah G. | Sciencx Wednesday September 10, 2025 » Opening Modals with Hash Listeners: A Simple JavaScript Pattern., viewed ,<https://www.scien.cx/2025/09/10/opening-modals-with-hash-listeners-a-simple-javascript-pattern-3/>
VANCOUVER
Emrah G. | Sciencx - » Opening Modals with Hash Listeners: A Simple JavaScript Pattern. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/09/10/opening-modals-with-hash-listeners-a-simple-javascript-pattern-3/
CHICAGO
" » Opening Modals with Hash Listeners: A Simple JavaScript Pattern." Emrah G. | Sciencx - Accessed . https://www.scien.cx/2025/09/10/opening-modals-with-hash-listeners-a-simple-javascript-pattern-3/
IEEE
" » Opening Modals with Hash Listeners: A Simple JavaScript Pattern." Emrah G. | Sciencx [Online]. Available: https://www.scien.cx/2025/09/10/opening-modals-with-hash-listeners-a-simple-javascript-pattern-3/. [Accessed: ]
rf:citation
» Opening Modals with Hash Listeners: A Simple JavaScript Pattern | Emrah G. | Sciencx | https://www.scien.cx/2025/09/10/opening-modals-with-hash-listeners-a-simple-javascript-pattern-3/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts