Функция смещения Jquery, делающая верхний стиль отрицательным числом в Firefox - PullRequest
Новая
       24

Функция смещения Jquery, делающая верхний стиль отрицательным числом в Firefox

1 голос
/ 03 апреля 2012

Я связываюсь с тем, чтобы создать настраиваемое окно предупреждения с фиксированным позиционированием.Он отлично работает в Chrome, но я не могу получить динамическое положение в Firefox.

Я установил модальный контейнер равным размеру документа 

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

, а затем #div alertBox живет в modalContainer и имеет позицию: фиксированный стиль.

Я использую функцию смещения jquery для установки верхнего и левого значений для #alertBox следующим образом: 

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});

В Chromeверхнее значение устанавливается равным 100px и отображается на экране.В Firefox я получаю неприятно большое число для верхнего значения, например -1084px.

Когда я выводю значения .offset () и position () в console.log, они одинаковы в chrome.Однако в Firefox, хотя значение смещения выводит именно то, что я установил, функция .position () выводит ужасно большое число.

Это известное несоответствие браузера?Мне нужно пойти по-другому?

1 Ответ

1 голос
/ 03 апреля 2012

Попробуйте установить исходную позицию как 

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

Это даст вам высоту области просмотра .

В качестве альтернативы вычислению смещения каждый раз, когда вы можете использовать margin: auto и position: absolute в своем окне предупреждения. Вы все еще, вероятно, захотите установить модальную высоту контейнера, но центрирование всего оповещения будет выполнено автоматически.

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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...