CODEWITHSUNDEEP
javascript
Bob
Bob

Reputation: 43

Javascript Modal Popup

I'm trying to create a simple modal popup. I have the CSS done, and the Javascript mostly done. I'm at the point where I click a button at the button of the page and the popup appears, but it appears at the top of the page. It appears excatly how it should if you were scrolled all the way to the top of the page.

I however want the modal popup box to appear center based upon the current scroll position. I also want it to stay centered when I scroll. As of right now it doesn't float at the center of the screen.

What javascript property do I need to use to adjust the position of the popup div as I scroll.

I've tried, but to no avail:

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

I'm using straight vanilla javascript, no jQuery.

TL;DR: I've created a modal popup but it doesn't stay centered when I scroll away from the very top of the page.

Upvotes: 4

Views: 4400

Answers (2)

Eduardo Cuomo
Eduardo Cuomo

Reputation: 18937

Modal Popup, OnClose popup event, and more!

https://github.com/reduardo7/xpopup

Upvotes: 0

aularon
aularon

Reputation: 11110

try position: fixed for your css, it won't scroll with this, also check display HTML page after loading complete

example:

<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 element makes hides background, you can make it transparent but still unclickable.
  • #floater and #content are for vertical centering.

Upvotes: 2

Related Questions