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?

Improve this question
6
  • 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, 2019 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, 2019 at 13:57
  • 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, 2019 at 14:21
  • I mean something like this. When viewing the page on desktop, the javascript alert shows up at the top of the content. Why does it do this? Do users always move their eyes to the top of the content? When I try the alert on a mobile device, it shows up in the middle of the content. Is there a reason as to why it shows up on top on a desktop, and in the middle on a mobile device? Should desktops show it in the middle too, just so behavior is same as on a mobile device?
    – Jon Abaca
    Jan 28, 2019 at 14:44
  • 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, 2019 at 16:03

1 Answer 1

Reset to default
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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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