CSS popup jumps back to top of page when closed - html

Question

Can anyone tell me a solution to make the page not jump back to the top when this CSS driven popup box closes?
At the moment the popup opens in the correct place but when you close it, the page jumps back to the top.
body {
font-family: Arial, sans-serif;
background-color:#721213;
background-size: cover;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: orange;
margin: 100px 0;
}
.box {
width: 20%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid orange;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: orange;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 40%;
position: relative;
transition: all 5s ease-in-out;
min-height:500px;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.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: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
.iframe {
width:95%;
display:block;
margin:0px auto 0px auto;
height:500px;
}
<div style="width:50%; margin:20px auto; background-color:#000; height:1000px;"></div>
<div style="width:50%; margin:20px auto; height:500; padding:200px 50px 20px 50px;">
Let me Pop up
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
<iframe class="iframe" src="http://www.impressdesign.com.au/clients/IMP/test.pdf"></iframe>
</div>
</div>
</div>
</div>

Answer 1

Weave: http://kodeweave.sourceforge.net/editor/#3cfa8a8181c0ffdc30103eb2bc19d9b3
Weave: (properly use a hash on an href)
http://kodeweave.sourceforge.net/editor/#3a84a44278b04eea7b5d0f067ba22427
Stop using href="#" and start using href="javascript:void(0)" instead.
The reason it jumps to the top is because when you use a hash in a href attribute it directs to an ID if none is specified it goes to the top by default. Unless you use e.preventDefault() using a click event in JS.
Because you're using :target This can easily be fixed by targeting a new ID.
So change this...
Let me Pop up
<a class="close">×</a>
to this...
Let me Pop up
<a class="close" href="#showpopup">×</a>
and it's fixed!
NOTE: You can do the same effect using a input[type=checkbox] instead of :target: http://kodeweave.sourceforge.net/editor/#8d7733f82faf240e0edcb6739c5d1a1a
A few key notes:
margin:0px auto 0px auto;
Values of 0 shouldn't have units specified.
Also it's bad practice to add CSS to your HTML element
<div style="width:50%; margin:20px auto; background-color:#000; height:1000px;"></div>
<!--
Instead put your CSS in your style sheet as a class;
that way it's easier to manage, maintain and get help if needed.
-->
<div class="box"></div>
Here is an example of one way on how to properly use a hash tag on a href attribute.
body {
padding: 1em;
width: 50%;
margin: 0 auto;
text-align: center;
}
.left {
text-align: left;
}
<ul class="left">
<li>
Lorem.
</li>
<li>
Ispum!
</li>
<li>
Dolor!
</li>
<li>
Sit!
</li>
<li>
Amet!
</li>
</ul>
<p id="lorem" class="left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste distinctio omnis a nihil, quisquam nisi similique facere, reprehenderit sint nostrum. Ipsa quibusdam, adipisci laudantium nam voluptatum quasi animi placeat eveniet.
</p>
<p id="ipsum" class="left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel tempora quasi, maiores debitis cupiditate laboriosam alias placeat temporibus veritatis. Quisquam, debitis dolorem saepe enim maiores, ex numquam corporis atque magnam.
</p>
<p id="dolor" class="left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione architecto quia officiis, amet. Eaque, et quia ducimus possimus rem suscipit, maxime, porro mollitia, corporis sequi magnam debitis. Expedita iure, maiores.
</p>
<p id="sit" class="left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ipsum vitae quasi, id reiciendis iure qui veritatis voluptatibus omnis libero ea, labore voluptate maxime, ducimus tenetur, deleniti. Rem, consequatur, accusantium.
</p>
<p id="amet" class="left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum maiores saepe sunt commodi soluta minus ad. Facilis magnam, distinctio voluptatibus ratione iste, laboriosam hic perspiciatis molestiae repellat accusamus tempora cumque!
</p>
Go to top

Answer 2

it happens because your button for closing is a element and href="#" change it to div element instead of a
EDIT :
i dont know why i got arrow down/point down but
i will explain it easier for you
Your CODE :
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
</div>
The what i suggest :
<div class="popup" id="popup">
<h2>Here i am</h2>
<div onClick="document.getElementById('popup').style.display='none';">X</div>
</div>
we added id="popup" to (div.popup) element, then we replaced " element" close button with