Member Avatar for uxohus2b

Hi,

I'm trying to make a simple popup page appear every time a user visits a particular page on my website. I want to make sure that the user reads the message in the popup, so I would like the popup to be superimposed on the webpage that called the popup. Basically, I want to have something like the last sample on this website:

The only difference is that I want this to happen every time a user goes to the particular page.
Thanks!

  • 5 Contributors
  • 5 Replies
  • 329 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by uxohus2b

Dani AI

Generated

A practical, future-proof approach is an in-page modal overlay (a DIV dialog) rather than a separate browser window. That avoids popup blockers (as observed) and gives full control over styling, placement and accessibility. It also addresses ’s annoyance point because an accessible, well-designed modal is less disruptive than a new window. Combine ’s trigger idea with ’s DIV approach: trigger the modal on DOMContentLoaded and handle show/hide and focus programmatically.

A compact implementation outline (markup + minimal script):

<div id="modal-overlay" hidden>
  <div role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-body">
    <h2 id="modal-title">Notice</h2>
    <div id="modal-body">Important message here.</div>
    <button id="modal-close">Close</button>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const overlay = document.getElementById('modal-overlay');
  const close = document.getElementById('modal-close');
  overlay.hidden = false;
  document.body.style.overflow = 'hidden';
  close.focus();
  close.addEventListener('click', closeModal);
  overlay.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });
  function closeModal() { overlay.hidden = true; document.body.style.overflow = ''; }
});
</script>

Behavior notes and accessibility cautions: use role="dialog" with aria-labelledby/aria-describedby, trap Tab focus inside the dialog, return focus to the previously focused element after close, and prevent background interaction (set inert/aria-hidden on main content or disable scrolling). To show the modal only once per session or persist a “do not show again” choice, store a flag in sessionStorage or localStorage; omit storage to show every single visit.

Testing: verify keyboard-only navigation, screen reader announcement, and small-screen layout. If the message isn’t mission-critical, prefer an inline banner or a less intrusive pattern to avoid harming the user experience.

Recommended Answers

All 5 Replies

Member Avatar for FC Jamison

Why would you want to annoy your visitors like that?

Member Avatar for anuradhu

you can do it by calling a Javascript function which opens the window on the load of the page...
there is an attribute onLoad with the <body tag....you can use that.......

but be very sure that the popup has to open everytime the page is viewed......

Member Avatar for tgreer

You can use window.open() . I suggest using a DIV, instead. For an example, look at any of my technical articles. Click the header, and a popup regarding the logo appears. All the CSS and scripts can be found by viewing the source on an article page.

Member Avatar for mostafadotnet

Hi uxohus2b,
As new browsers do have pop-up blocker, then willing to open a new pop-up window is not good idea.

Good luck.

Member Avatar for uxohus2b

Thanks a lot for all your suggestions.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.