Home/ Questions/Q 7732913
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T06:51:01+00:00

I am tying to create a custom alert box with fixed positioning. It works

  • 0

I am tying to create a custom alert box with fixed positioning. It works great in chrome, but I can’t get the dynamic position right in Firefox.

I set a modal container to equal the size of the document

$('#modalContainer').height($.getDocHeight());

and then the #alertBox div lives within modalContainer and has position:fixed style.

I am using the jquery offset function to set the top and left values for #alertBox like so:

var off_top=$(window).height()/3-$('#alertBox').height()/3;
var off_top=100;
var off_left=$(window).width()/2- $('#alertBox').width()/2;
$('#alertBox').offset({top:off_top,left:off_left});

In chrome the top value gets set to 100px and show up on the screen. In firefox, I get an obnoxiously large number for the top value like -1084px.

When I output both the .offset() values and position() values to console.log, they are the same in chrome. However in firefox, while the offset value outputs exactly what I set it to, the .position() function outputs the obnoxiously large number.

Is this a known browser inconsistency? Do I need to go about this a different way?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try setting your initial position as 

    $('#modalContainer').height(document.documentElement.clientHeight);

    That should get you the height of the viewport.

    As an alternative to calculating your offset every time you could do use margin: auto and position: absolute on your alert box. You’ll still probably want to set the modal container height, but all the alert’s centering will be done automatically.

    HTML 

    <body>
<p>Lorum ipsum ... </p>
<div id='modalContainer'>
    <div id='alertBox'>
        <h1>Beware!</h1>
    </div>
</div>
</body>

    CSS

    #modalContainer {
    position: absolute;
    width: 100%;
    margin: 0;
    padding: 0;
}
#alertBox {
    width: 300px; /*sample*/
    height: 200px; /*sample*/
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

    JavaScript

    $('#modalContainer').height(document.documentElement.clientHeight);
    • 0