How to prevent a javascript popup from riding on scroll..?

Question

Im having trouble with this Javascript popup. It works fine expect for one important thing, when I scroll down the page on my Home Screen if i click the sign in button this pop-up seems to hide up at the top. It does't cater for the scroll.

I have added screenshots to show it what I mean. the first one shows it looking fine, and the other one shows the when I scroll down a little bit and press the button.

It also seems to hide the menu bar at the top.. which is fixed

I have no idea how to fix these things. Any one have an idea?

Works fine! But not when I scroll down!

<script src="js/jquery.avgrund.js"></script>
<script>
$(function() {
    $('#show').avgrund({
        height: 700,
        holderClass: 'custom',
        showClose: true,
        showCloseText: 'close',
        onBlurContainer: '.containerrr',
        template: '<section id="conntent">' +
        '<form form name="login" action="loginprocess.php" method="post"  accept-charset="utf-8">' +
        '<a href="Home_Page.php"><img src="images/logopop.png"></a>' +
        '<h1></h1>' + '<div>' + '<input type="text" name="email" placeholder="example@example.com" required id="username" />' + '</div>' + '<div>' + '<input type="password" name="password" placeholder="Password" required id="password" />' + '</div>' + '<div>' + '<input type="submit" id="submit" name="submit" value="Log In">' + '</div>' + '</form>' + '</section>'

    });
});
</script>

My CSS

.containerrr {
position: fixed;
width: 900px;
opacity: 0.95;
filter: alpha(opacity=95);
margin-bottom: 12%;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
   }

 #conntent {
background-color: rgba(250,250,250,1.0);
padding: 25px 0 0;
position: fixed;
text-align: center;
text-shadow: 0 1px 0 #fff;
width: 350px;
margin-bottom: 0;
margin-left: 3%;
margin-right: 0;
margin-top: 1px;
  }
   #conntent h1 {
color: #7E7E7E;
font: bold 25px Helvetica, Arial, sans-serif;
letter-spacing: -0.05em;
line-height: 20px;
margin: 10px 0 30px;
  }
  #conntent h1:before,
  #conntent h1:after {
content: "";
height: 1px;
position: absolute;
top: 10px;
width: 27%;
   }
   #conntent h1:after {
background: rgb(126,126,126);
background: -moz-linear-gradient(left,  rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
right: 0;
   }
   #conntent h1:before {
background: rgb(126,126,126);
background: -moz-linear-gradient(right,  rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
left: 0;
}


#conntent form { margin: 0 20px; position: relative }
#conntent form input[type="text"],
#conntent form input[type="password"] {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: #eae7e7 url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) no-repeat;
border: 1px solid #c8c8c8;
color: #777;
font-family:'Source Sans Pro', sans-serif;
font-size:15px;
margin: 0 0 10px;
padding: 15px 10px 15px 40px;
width: 80%;
 }
#conntent form input[type="text"]:focus,
#conntent form input[type="password"]:focus {
-webkit-box-shadow: 0 0 2px #00bbe0 inset;
-moz-box-shadow: 0 0 2px #00bbe0 inset;
-ms-box-shadow: 0 0 2px #00bbe0 inset;
-o-box-shadow: 0 0 2px #00bbe0 inset;
box-shadow: 0 0 2px #00bbe0 inset;
background-color: #fff;
border: 1px solid #00bbe0;
outline: none;
}
#username { background-position: 10px 10px !important }
#password { background-position: 10px -53px !important }
#conntent form input[type="submit"] {
border: 1px solid #00a2e2;
background: -webkit-linear-gradient(top,  #00a2e2 0%,#00a2e2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00a2e2 0%,#00a2e2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00a2e2 0%,#00a2e2 100%); /* IE10+ */
background: linear-gradient(to bottom,  #00a2e2 0%,#00a2e2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64c8ef', endColorstr='#00a2e2',GradientType=0 ); /* IE6-9 */
color: #fff;
float: right;
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
height: 35px;
position: fixed;
width: 120px;
margin-bottom: 35px;
margin-left: 15px;
margin-top: 25px;
margin-right: 0px;
  }
  #conntent form input[type="submit"]:hover {
cursor:pointer;
border-color:rgba(71, 186, 255, 1);
background: rgba(71, 186, 255, 1);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#fee79a',GradientType=0 );
 }
 #conntent form div a {
color: #004a80;
float: right;
font-size: 12px;
text-decoration: underline;
margin-bottom: 0;
margin-left: 0;
margin-right: 15px;
margin-top: 25px;
 }

Do you even want people to scroll down when you have the popup open, if not you can disable scrolling the page completely when the popup is open http://stackoverflow.com/questions/6411282/how-to-lock-scrolling-of-a-web-page-temporarily — Stephan, Mar 12 '14 at 22:45
What css is connected to the container your pop up is in? It's probably either the class called `custom` or maybe you put some in the id `content`? — Jorg, Mar 12 '14 at 22:46
@Stephan I want people to be able to scroll freely and press the 'sign in' where ever they are on the page. At the moment you can only press it can a user is at the top of the page. Otherwise if your further down the page the pop-up gets cut off for some reason — user3339063, Mar 12 '14 at 22:48
If you want the popup to stay in the same place (relative to the window) even if you scroll, it needs to be `position: fixed;` — Mike Christensen, Mar 12 '14 at 22:51

score 0 · Answer 1 · answered Mar 12 '14 at 22:57

0

Use position: fixed both in the header of the page and the container of the popup. Then you'll be able to scroll everything else and those elements will remain fixed respect to the browser window.

answered Mar 12 '14 at 22:57

Oscar Paz

18,084
3
27
42

did that, but didn't do anything. Problem still exists. – user3339063 Mar 12 '14 at 22:59
Can you post the modified CSS rules that apply to those elements? It should work. Any element with `position: fixed` will ignore scrolling. – Oscar Paz Mar 13 '14 at 22:04
above is the latest version of the CSS – user3339063 Mar 15 '14 at 16:16

How to prevent a javascript popup from riding on scroll..?

My CSS

1 Answers1