2

So, I have some css3 popups/modals that I'm working with. I'm mostly pretty happy with the way that they work, but after the modal is closed the page scrolls back up to the top and I'm not sure why this is happening.

You can see the behavior here Here's a snippet of the html

   <div class="flip">
   <div class="front">
   <img src="images/SDG_ICONS/SDG01.png" alt="No Poverty" />
   </div>
   <div class="back">
      <ul>
        <a href="#ared-no-poverty"><li>ARED</li></a>
        <a href="#agrocenta-no-poverty"><li>AgroCenta</li></a>
        <a href="#tilly-no-poverty"><li>Tilly&#39;s Farm</li></a>
      </ul>
   </div>
   </div>
   <div id="ared-no-poverty" class="overlay">
     <div class="popup">
       <h2>ARED</h2>
       <a class="close" href="#"> &times;</a>
       <p class="popup">Some text in here</p>
</div>

And here's the css I'm using for the popup/modals

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
    z-index: 2;
}
.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
img.popup{
width:150px;
height: auto;
float:left;
}
.popup p{
width:auto;
margin:0;
}
.popup p:nth-child(2){
padding-top:5px;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(88, 120, 33, 0.7); /*0,0,0*/
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
    z-index: 2;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

So, how can I keep the at the same scroll position as when the popup was called and what is causing the modal to scroll to the top?

nizz0k
  • 471
  • 1
  • 8
  • 23
  • Position your `popup` using absolute, not relative (and set relative to their parent so it stay in position) – Asons Nov 05 '16 at 08:16
  • Do you mean set the .overlay to relative and the .popup to absolute? – nizz0k Nov 05 '16 at 08:57
  • I didn't tweak any of the other positioning but this doesn't seem to work. You can see it live here http://46.101.194.36/greentec-capital.com/index.php/about-us/impact# – nizz0k Nov 05 '16 at 09:05
  • No, your are right, it won't, I´m sure this has to do with the `:target` pseudo ... will make a few tests to see if it is it – Asons Nov 05 '16 at 09:12
  • 1
    Possible duplicate of [How does "#" (hash mark, number sign) close a modal box?](http://stackoverflow.com/questions/26829556/how-does-hash-mark-number-sign-close-a-modal-box) – Asons Nov 05 '16 at 09:25
  • 1
    You could replace `#` with `#!` or a pseudo location. You should reconsider using CSS modals like this one, they tend to leave loads of unnecessary history entries. – AA2992 Nov 05 '16 at 09:30

1 Answers1

5

The problem why it scrolls to top is when you close the overlay you use a sinle hash in <a class="close" href="#"> &times;</a>, which makes it scroll to top

To make this work you could either use script, or, if each link will have its own overlay, you can target a sibling element to make it stay when closed

Use i.e. #close and it will work

Src: How does "#" (hash mark, number sign) close a modal box?

As a side note, here is a post of mine, that have many interesting CSS only answers that might be an option instead of the hash making history entries issue @AnkithAmtange mentioned

Community
  • 1
  • 1
Asons
  • 84,923
  • 12
  • 110
  • 165