ПО этой теме много вариантов решения
Вот столкнулся с такой проблемой
<a href="#" data-reveal-id="myModal" data-animation="fade">Заказать звонок</a>
<!--modal-->
<div id="myModal" class="reveal-modal">
<p>Содержимое модального окна</p>
<a class="close-reveal-modal" title="Закрыть"><span>X</span></a>
</div>
.reveal-modal-bg {
position: fixed; top: 0; left: 0;
height: 100%;
width: 100%;
background: #000;
background: rgba(0,0,0,.85);
z-index: 150;
display: none;
}
.reveal-modal{
visibility: hidden;
position: fixed; top: 150px; left: 50%;
margin: 0 0 0 -159px;
width: 318px;
background: #fff;
padding: 10px 0 20px 0;
z-index: 151;
box-shadow: 0 0 10px rgba(0,0,0,.4);
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
border: none;
text-align: center;
}
Все вроде нормально работает. Но при не большой прокрутке и клике на кнопку вызова модального окна - центровка окна пропадает. Подскажите, в чем может быть проблема