how to prevent javascript div popup from jumping back to the top of the page?

Question

I have the following neat code that opens a small popup box when the link is clicked ...the problem is that I use it on a very long page with lots of content, and whenever someone opens the popup, the actual content page jumps back to the very top, which is annoying if someone just spent a while scrolling down. How can I force the page to stay there even though the popup window is opened/closed?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <script type="text/javascript">
            function showPopUp(el) {
                var cvr = document.getElementById("cover")
                var dlg = document.getElementById(el)
                cvr.style.display = "block"
                dlg.style.display = "block"
                if (document.body.style.overflow = "hidden") {
                    cvr.style.width = "1024"
                    cvr.style.height = "100%"
                }
            }
            function closePopUp(el) {
                var cvr = document.getElementById("cover")
                var dlg = document.getElementById(el)
                cvr.style.display = "none"
                dlg.style.display = "none"
                document.body.style.overflowY = "scroll"
            }
        </script>
        <style type="text/css">
            #cover {
                display:none;
                position:absolute;
                left:0px;
                top:0px;
                width:100%;
                height:100%;
                background:gray;
                filter:alpha(Opacity=50);
                opacity:0.5;
                -moz-opacity:0.5;
                -khtml-opacity:0.5
            }
            #dialog {
                display:none;
                position:absolute;
                top:50%;
                left:50%;
                width:400px;  /* adjust as per your needs */
                height:400px;   /* adjust as per your needs */
                margin-left:-200px;   /* negative half of width above */
                margin-top:-200px;   /* negative half of height above */
                z-index:100;
                background:white;
                padding:2px;
                font:10pt tahoma;
                border:1px solid gray
            }
        </style>
    </head>
    <body>
        <div id="cover"></div>
        <div id="dialog">
            My Dialog Content
            <br><input type="text">
            <br><input type="button" value="Submit">
            <br><a href="#" onclick="closePopUp('dialog');">[Close]</a>
        </div>
        <a href="#" onclick="showPopUp('dialog');">Show</a>   
    </body>
</html>

Sorry, I searched high and low before asking but I'm a javascript dummy and can't find the answer myself. I searched and didn't find anything that made sense... — user1227914, Jun 13 '12 at 22:20
Is it similar to this issue? (http://stackoverflow.com/questions/1155952/how-do-i-prevent-scrolling-to-the-top-of-a-page-when-popping-up-a-jquery-ui-dial) — Nope, Jun 13 '12 at 22:21
Take a look at the [jQuery ui-dialog widget](http://jqueryui.com/demos/dialog/) — gdoron, Jun 13 '12 at 22:21
I tried adding a return false; to the end of the function but that didn't help. — user1227914, Jun 13 '12 at 22:26

score 3 · Answer 1 · answered Jun 13 '12 at 22:25

3

change this code:

from <a href="#" onclick="closePopUp('dialog');">[Close]</a>

to

<a href="javascript:void(0)" onclick="closePopUp('dialog');">[Close]</a>

and also:

<a href="#" onclick="showPopUp('dialog');">Show</a>

to:

<a href="javascript:void(0)" onclick="showPopUp('dialog');">Show</a>

Try that.

answered Jun 13 '12 at 22:25

Sammy

3,059
4
23
32

That didn't work unfortunately. It shows the popup box but off the screen at the very top. – user1227914 Jun 14 '12 at 18:35

Hendeca · Answer 2 · 2017-10-18T21:19:03.827

When you click on the link to open the popup, you are actually navigating to "#" which causes the scrollbar to go back to the top of the page. You really shouldn't use the onclick attribute anymore, it's better to attach an event listener to an element with Javascript.

As mentioned by user Sammy above, using href="javascript:void(0)" should prevent this behavior. Personally I like to just leave the href attribute off of the <a> tag if I'm not actually using it as a standard link. The only downside is that you need to re-style the link to look like a normal link as it will be styled differently if it's missing the href attribute.

I've made a JSFiddle with a solution. As you can see, I removed the href attribute and re-styled the links, using Javascript to add event handlers for the links. You can scroll down a bit and click the link; the popup will open and the scrollbar will remain in the same position.

The code:

HTML:

<div class="container">
  <div id="cover"></div>
  <div id="dialog">
    My Dialog Content
    <br><input type="text">
    <br><input type="button" value="Submit">
    <br><a class="close-button" data-popup="dialog">[Close]</a>
  </div>
  <a class="show-button" data-popup="dialog">Show</a>   
</div>

JS

var showButton = document.getElementsByClassName('show-button');
var closeButton = document.getElementsByClassName('close-button');

showButton[0].addEventListener('click', showPopUp);
closeButton[0].addEventListener('click', closePopUp);

function showPopUp(e) {
        e.preventDefault();
    var dialogId = e.currentTarget.getAttribute('data-popup');
    var scrollPos = window.scrollY;
    var cvr = document.getElementById("cover")
    var dlg = document.getElementById(dialogId)
    cvr.style.display = "block"
    dlg.style.display = "block"
    window.scroll(0, scrollPos);
}
function closePopUp(e) {
        e.preventDefault();
    var dialogId = e.currentTarget.getAttribute('data-popup');
    var cvr = document.getElementById("cover")
    var dlg = document.getElementById(dialogId)
    cvr.style.display = "none"
    dlg.style.display = "none"
}

CSS

.container {
  height: 5000px;
}

.show-button,
.close-button { 
  position: fixed; 
  color: blue;
  text-decoration: underline;
}

.show-button:hover,
.close-button:hover {
  cursor: pointer;
}

#cover {
  display:none;
  position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  background:gray;
  filter:alpha(Opacity=50);
  opacity:0.5;
  -moz-opacity:0.5;
  -khtml-opacity:0.5
}
#dialog {
  display: none;
  position: fixed;
  top:50%;
  left:50%;
  width:400px;  /* adjust as per your needs */
  height:400px;   /* adjust as per your needs */
  margin-left:-200px;   /* negative half of width above */
  margin-top:-200px;   /* negative half of height above */
  z-index:100;
  background:white;
  padding:2px;
  font:10pt tahoma;
  border:1px solid gray
}

score 0 · Answer 3 · answered May 14 '13 at 14:20

0

Try changing this

<a href="#" onclick="closePopUp('dialog');">[Close]</a>

to

<a onclick="closePopUp('dialog');">[Close]</a>

and this

<a href="#" onclick="showPopUp('dialog');">Show</a>

to

<a onclick="showPopUp('dialog');">Show</a>

answered May 14 '13 at 14:20

BenEgan1991

637
1
9
15

score -1 · Answer 4 · answered Jun 13 '12 at 22:24

-1

try using position:fixed instead of position:absolute. For more read: http://www.w3schools.com/Css/css_positioning.asp

answered Jun 13 '12 at 22:24

BlackSpy

5,563
5
29
38

how to prevent javascript div popup from jumping back to the top of the page?

4 Answers4