Member Avatar for learnerasp

Hi There,

I need help badly on the div tags. I dont have much knowledge on div tags
I have a div tag in my code and it should be show when there is an inactivity. Its working fine, until today I found a bug.
When I scroll my browser to the end, the div is still shown at the upper part of the browser.
Unless i scroll up (as a programmer, I know that div will be showing up but ofcourse user will not know) I dont know whether the div is shown.

Whether the user scrolls up or down, he should be viewing the alert which I show him.
How can I solve this?
My Div tag code:

<div onload="blurAll();"  id="userMessage" style="position: absolute; background-color:ButtonFace; z-index: 1; display: block; top: 307px; left: 304px; 
                            visibility:hidden; border: 3px solid blue; width: 383px;">  
               <table style="width: 388px; height: auto; background-color:Blue;"> 
                   <thead align="left" title="Registration - Warning">
                            <tr>
                                <td style="color:White;">Registration - Warning
                                </td>
                            </tr>
                   </thead>
               </table>                                               
               <table style="width: 388px; height: auto; background-color:ButtonFace;"> 
                     <tr> <td><img src="triangle.jpg"id="img"  alt="warning" /></td>
                     <td>
                       You are inactive for sometime. Your session will expire in 5 min.<br />
                       Do you wish to extend?
                     </td>
                     </tr>                           
                      <tr><td></td><td align="center">
                      <asp:Button CssClass="groupButton" ID="btnStillHere" OnClientClick="doRefresh()" Text="OK"  runat="server" Width="60px" />
                      <input type="button" class="groupButton" id="btnDoNothing" onclick="hideUserMessage()"  value= "Cancel" runat="server" />
                      </td> </tr> 
                 </table>
            </div>

Thanks so much in advance.
Regards

  • 2 Contributors
  • 3 Replies
  • 129 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by billymcguffin

Dani AI

Generated

— glad 's fix cleared the visibility problem. The remaining question (making an in-page popup behave like a blocking alert) is common: you cannot make a DOM element freeze the JavaScript runtime the way alert() does, but you can reproduce the same user experience by creating a modal that:

  • visually covers the page with a semi-opaque overlay,
  • prevents clicks/scrolling on the underlying content,
  • moves keyboard focus into the popup and traps Tab so focus cannot escape,
  • restores focus and page state when closed.

Two practical options:

  1. Use the built-in HTML <dialog> and its showModal() method — it gives native modal semantics and focus handling in modern browsers. See MDN for details: dialog element.
<dialog id="sessionDialog" role="dialog" aria-modal="true">
  <h2>Session warning</h2>
  <p>Your session will expire. Extend?</p>
  <button id="extend">Extend</button>
  <button id="cancel">Cancel</button>
</dialog>

<script>
const dlg = document.getElementById('sessionDialog');
dlg.showModal(); // modal shown; close() when done
</script>
  1. If you build a custom div-based modal, make sure to:
  • add a full-viewport overlay with a high z-index and pointer-events enabled so background clicks are blocked,
  • set overflow: hidden on the page while the modal is open to prevent scrolling,
  • move focus into the dialog (element.focus() on a focusable element) and implement a Tab-key trap so Tab/Shift+Tab cycle inside the dialog,
  • use aria-modal="true" / role="dialog" and consider the inert attribute (or a polyfill) to disable background controls. See MDN: inert attribute.

Small focus-trap sketch:

function trapFocus(container) {
  const focusables = container.querySelectorAll('a, button, input, [tabindex]:not([tabindex="-1"])');
  const first = focusables[0], last = focusables[focusables.length-1];
  container.addEventListener('keydown', e => {
    if (e.key === 'Tab') {
      if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
      else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
    }
  });
}

Troubleshooting tips: ensure the overlay covers 100% of viewport, its z-index is higher than any page element, and pointer-events are not disabled. Restoring focus to the element that had focus before opening improves UX.

Recommended Answers

All 3 Replies

Member Avatar for billymcguffin

for the "position" part of your style for the div, try using "fixed" instead of "absolute". it should make the div positioned according to the browser window instead of the web page itself.

Member Avatar for learnerasp

Hi Billymcguffin,

Thanks so much for your help, it worked like a wonder.
Its been so simple ofcourse its like a giant task for me since I did not know how to work on div tag and was wasting 2 days of my time trying different codes
Thanks so much.

also, I have one more query.
When javascript alert is popped up, it doesnot allow us to focus on the window till we click on the alert ok button.
Can we do the same when I popup div alert.
I have put in the code in a function to call when div is loaded. But its not working
The code I am using is:

<div [B]onload="blurAll();"  [/B]id="exitMessage" style="position: fixed; background-color:ButtonFace; z-index: 1; display: block; top: 307px; left: 304px; 
                        visibility:hidden; border: 3px solid blue; width: 250px;"> 
function blurAll()
{
   // alert("blur");
    //window.blur();
     window.focus=false; 
}

Thanks so much in advance
Regards

Member Avatar for billymcguffin

very sorry, but i'm not very good at javascript :( . glad i could help some, though.

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.