Member Avatar for kavithakesav

Hi,
I am working on one website for that i need like floating window. (mean when visitor will open the website that window has to come and it should be timelimit aftr that it has to close atomatically. for that window more and close is required).


Cheersssss,
Kavithakesav

  • 2 Contributors
  • 1 Reply
  • 218 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by essential

Dani AI

Generated

A better approach than opening a separate browser window is an in‑page modal: it avoids pop‑up blockers, works on mobile, and gives you full control (countdown, "More" and "Close" buttons, accessibility). asked for an auto‑closing floating window with "more" and "close" controls; 's suggestion to use a new window can trigger blockers and has timing/close restrictions in modern browsers. An in‑page modal is more reliable and easier to style.

Below is a compact, ready‑to‑use pattern. It shows on load, displays a countdown, closes automatically, and provides a "More" link and "Close" button. Replace "promo.html" and the timeout value as needed.

<!-- modal HTML (put near the top of <body>) -->
<div id="promo-modal" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="promo-title" hidden>
  <div style="background:#fff;padding:16px;max-width:420px;margin:40px auto;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.2);text-align:center;">
    <h2 id="promo-title" style="margin:0 0 8px">Special message</h2>
    <p style="margin:0 0 12px">This window closes in <span id="promo-count">10</span>s.</p>
    <div>
      <a id="promo-more" href="promo.html" target="_blank" rel="noopener" style="margin-right:8px">More</a>
      <button id="promo-close">Close</button>
    </div>
  </div>
  <div style="position:fixed;inset:0;background:rgba(0,0,0,.5)"></div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  var modal = document.getElementById('promo-modal');
  var countEl = document.getElementById('promo-count');
  var closeBtn = document.getElementById('promo-close');
  var moreLink = document.getElementById('promo-more');
  var seconds = 10; // change timeout here
  var remaining = seconds;
  var timer;

  function openModal() {
    modal.removeAttribute('hidden');
    modal.focus();
    countEl.textContent = remaining;
    timer = setInterval(function () {
      remaining -= 1;
      countEl.textContent = remaining;
      if (remaining <= 0) closeModal();
    }, 1000);
  }
  function closeModal() {
    clearInterval(timer);
    modal.setAttribute('hidden', '');
  }

  closeBtn.addEventListener('click', closeModal);
  moreLink.addEventListener('click', closeModal);

  try {
    if (!localStorage.getItem('promoShown')) {
      openModal();
      localStorage.setItem('promoShown', '1'); // show once per browser until cleared
    }
  } catch (e) {
    openModal(); // fallback if storage is blocked
  }
});
</script>

Troubleshooting and notes:

  • Place the script at the end of the body or keep DOMContentLoaded as above.
  • If the modal never appears, check the console for errors and ensure IDs are unique.
  • Respect UX: avoid aggressive auto‑popups, consider showing only once per session (localStorage/cookie), and ensure keyboard users can close the dialog.
Member Avatar for essential

Assuming that this your index.html

<html>
<head>
<title>index page</title>
<script type="text/javascript">
<!--
window.onload = function()
{
/* You must replaced this with your own page that you wish to be loaded */

window.open('floating.html', targe='_blank', 'toolbar = no, scrollbars = no, location = no,  width = 500, height = 500');
}
//-->
</script>
</head>
<body> 

</body>
</html>

And this will be our floating window, clocked for 10secs and when it reaches its limit this wil automaticaly close!
Enjoy coding...

<html>
<head>
<title>floting page</title>
<script type="text/javascript">
<!--
////////////////////////////////////////
/////////////By Essential///////////
////////////////////////////////////////

window.onload = clocked; function clocked()
{
x = 10;
var timer = setTimeout('clocked()', 1000); 
x = x - timer;

document.getElementById('countdown').innerHTML = 'You still have 0' + x + ' sec.  remaining before this window close!'; 
if ( timer == 10 ) { clearTimeout( timer );window.close(); }
}

//-->
</script>
</head>
<body>
<p align="center"> 
<span id="countdown">&nbsp;</span>
<p>
</body>
</html>
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.