Div popup changes browser scrolled position

[jdanielsnh]

Hello,

I'm using a hidden Div as a pop-up, there are many different Divs on
this page. I have the Div come up when a link is clicked, this makes
the Div appear above the linked text. The trouble is when the user is
a ways down in the page and clicks on the link, the Div appears but
this actions scrolls the browser window back to the top.

Is there any way to prevent this frrom happening? Code is below:

<style type="text/css">
..divBg {
background-attachment:fixed;
background:url(../../images/bg_cartoon_popup2.gif);
background-repeat:no-repeat;
height: 160px;
width: 426px;
padding:7px;
position: absolute;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
margin-left: 200px;
margin-top: -200px;
display:none;
z-index:10;
}
</style>



<div id="divLife" style="position:relative">
<h3>Title 1</h3>
<p>Sub title 1<br />
<a href="life.cfm">Read</a>

<a href="##"
onclick="document.getElementById('popup_life').style.display='block';">First
link here to open hidden Div</a></p>

<div class="divBg" id="popup_life" style="display:none"><br />
<a href="http://www.mysite.com" target="_blank"
onClick="document.getElementById('popup_life').style.display='none';">https://
www.mysite.com</a>

<a href="https://www.mysite.com" target="_blank"
onclick="document.getElementById('popup_life').style.display='none';"><b>Please
click here to continue</b></a> or <a href="##"
onClick="document.getElementById('popup_life').style.display='none';
return false;"><b>close this notice window</b>.</a></p>
</div>
</div>

 

[Thomas 'PointedEars' Lahn]

I'm using a hidden Div as a pop-up, there are many different Divs on
this page. I have the Div come up when a link is clicked, this makes
the Div appear above the linked text. The trouble is when the user is
a ways down in the page and clicks on the link, the Div appears but
this actions scrolls the browser window back to the top.

<a ... onclick="...; return false;">...</a>

But better would be not using a link but a button and/or writing that button
with client-side script.

<script type="text/javascript">
document.write('<a ... onclick="...; return false;">...<\/a>');
</script>

That probably is in the FAQ, too.

In case you didn't notice any of the many pointers posted here:

http://jibbering.com/faq/


PointedEars