Javascript Modal Popup

Question

Я пытаюсь создать простое модальное всплывающее окно. У меня есть CSS, и Javascript в основном сделан. Я нахожусь в той точке, где я нажимаю кнопку на кнопке страницы, и появляется всплывающее окно, но оно появляется в верхней части страницы. Кажется, что это было бы хорошо, если бы вы прокручивались до самого верха страницы.

Я тем не менее хочу, чтобы модальное всплывающее окно появилось в центре, основанном на текущей позиции прокрутки. Я также хочу, чтобы он оставался центрированным, когда я прокручиваю. На данный момент он не плавает в центре экрана.

Какое свойство javascript необходимо использовать, чтобы отрегулировать положение всплывающего div при прокрутке.

Я пытался, но безуспешно:

function showModal(id) 
{ 
    window.onscroll = function() { document.getElementById(divID).style.top = 
               window.pageYOffset || 
               document.body.scrollTop || 
               document.documentElement.scrollTop; }; 
    document.getElementById(id).style.display = "block"; 
    document.getElementById(id).style.top = 
       window.pageYOffset || 
       document.body.scrollTop || 
       document.documentElement.scrollTop; }; 
} 

Я использую прямой ваниль JavaScript, не JQuery.

TL; DR: Я создал модальное всплывающее окно, но оно не остается центрированным, когда я прокручиваю прочь от самой верхней части страницы.

Answer 1

попробовать position: fixed для CSS, это не будет прокручиваться с этим, а также проверить display HTML page after loading complete

пример:

<style> 
#floater {float:left; height:50%; margin-bottom:-1px;} 
#top  {position: fixed; top:0; left: 0; width: 100%; height: 100%; background: #fff} 
#content {clear:both; height:540px; position:relative; height: 100%; width: 100%;} 
</style> 
<div id="top"> 
    <div id="floater"></div> 
    <div id="content"> 
     <div style="border: 1px solid #DDD; padding: 10px; background: #BBB; width: 300px; margin: 0 auto">Popup Contents Here</div> 
    </div> 
</top> 

• #top элемент делает фон шкуры, вы можете сделать его прозрачным, но все еще unclickable ,
• #floater и #content для vertical centering.

Answer 2

Modal Popup, OnClose всплывающее событие и многое другое!

https://github.com/reduardo7/xpopup