0

Good day,

The javascript alert box always shows up at the top of the page and it prevents any other interaction with the page until it is closed by clicking the OK button or pressing ESC. Because of that, I use it give the user messages when something significant happens, like a payment failing.

My boss might want to change it to a modal that shows up in the center of the screen. She says she doesn't notice the alert message. I don't want to do this because it means more work for a simple dialog. Our CSS guy is busy with something else, our JS guy is busy with something else.

Are there UX theories as to why it shows up on top of the page?

  • 1
    You can use bootstrap for easy implementation of modal. I would like to suggest that use bootstrap v3. getbootstrap.com/docs/3.4/javascript/#modals You have to make some custom changes for make it center. here is the link for css changes codepen.io/dimbslmh/full/mKfCc – Awesome Designer Jan 28 at 13:55
  • I think we already use that. Maybe the JS and CSS guys will check it out after they're busy with their other tasks. – Jon Abaca Jan 28 at 13:57
  • Please check my edited answer – Awesome Designer Jan 28 at 13:59
  • 1
    What exactly is your question? There's a bit of extra information here, and it looks like the only question you have is about placement of an alert ("...why it shows up on the top of the page?"), is that right? – maxathousand Jan 28 at 14:21
  • 1
    The alert is just down to the browser each clients browser will dictate how the dialog is displayed. You should have a more comprehensive alert to differentiate between the different types of action, the standard dialog box seems so old fashioned now. – user2520890 Jan 28 at 16:03
1

Your question seems to be based on a false premise ("The javascript alert box always shows up at the top of the page"). Where a Javascript alert() box appears is down to the browser: from a quick test:

  • Chrome positions the alert box centred, at the top of the browser window:

    Chrom Alert Box

  • IE11 positions the alert box in the centre of the screen (both vertically and horizontally), irrespective of where the browser window is:

    IE Alert Box

This lack of control of the position and appearance of the built-in alert/confirm dialogs of Javascript is why many implement alerts using JS/CSS.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.