[英]how to prevent javascript div popup from jumping back to the top of the page?
[英]how to prevent css div popup from jumping back to the top of the page
我对JS并不很精通,但是我试图将一个简单的学校投资组合站点与一个黑色透明div一起用作灯箱。 我正在使用CSS和JS切换此div,但是在长滚动页面上,打开时它会跳到顶部。 这是我的CSS:
<style type="text/css">
div.transbox{
width:100%;
height:100%;
margin:0px 0px;
position:fixed;
background-color:#000000;
background:rgba(0,0,0,0.75);
z-index:99;
}
p.ptransbox{
width:400px;
padding:5px;
position:relative;
background:rgba(255,255,255,0.5);
color:#000;
border-radius:5px;
}
img.itransbox{
padding:10px;
position:relative;
background:rgba(255,255,255,0.5);
border-radius:5px;
}
这是JS:
var toggle2 = function() {
var mydiv = document.getElementById('02');
if (mydiv.style.display === 'none' || mydiv.style.display === '')
mydiv.style.display = 'block';
else
mydiv.style.display = 'none'
}
这是可立即作为打开div的链接(打开)的代码:
<td style="float:left; width: 33%" class="school">
<a title="Girl in Chair, 2012" class="tooltip" href="#" onclick="toggle2();" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/thumbs/chairO.png',1)">
<img src="images/thumbs/chair.png" id="Image2" /></a>
这是启用“灯箱”的代码,并具有将其关闭的选项:
<a href="#" onclick="toggle2();">
<div align="center" id="02" class="transbox" style="display: none;">
<p><img class="itransbox" src="images/anti-thumbs/chair.jpg" /></p>
<p class="ptransbox"><strong>Wörner Hall</strong>, 2010</p></div></a>
请忽略所有标题,替代或仅针对内容的任何内容。 您可以在此处查看我的投资组合的运行情况: http : //www.student.nvcc.edu/home/majeffers3/并且,如果您注意到滚动到底部并单击某个项目,它会将您跳到顶部。 我已经潜伏了很长时间,这是我第一次发布问题,因为我似乎找不到解决方案。 非常感谢您的帮助!
单击链接时,您需要阻止默认操作。 最简单的方法是从onclick
处理程序返回false
:
<a title="Girl in Chair, 2012" class="tooltip" href="#" onclick="toggle2(); return false;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/thumbs/chairO.png',1)">
请从href="#"
更改为href="javascript:;"
。 单击时只需转到“#”链接。
确保从onclick处理程序返回false。 如果不这样做,则将启动超链接的默认操作,这意味着您将导航到#,这表示当前页面的顶部。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.